8. Component Styles

Set Styles Property in Component Metadata:

import { Component, HostBinding } from '@angular/core';
import { TechnologyTeam } from './technology';

@Component({
  selector: 'app-root',
  template: `
        <h1>{{ title }}</h1>
          <div class="left">
              <app-technology-main [technology]="technology"></app-technology-main>
          </div>
          <div class="right">
            <img [src]="imageUrl" class="img-round" alt="princess image">
          </div>
  `,
  styles: ['h1 { font-weight: bold; }']
})
export class AppComponent {
  title = 'Tour of Technologies';
  imageUrl = '../assets/polymer1.jpg-large';
  technology = new TechnologyTeam(
      'Angular 5', ['Angular CLI', 'Angular 4', 'Angular Material']
  );

  @HostBinding('class') get themeClass() {
    return 'theme-light';
  }

}

TechnologyMainComponent:

import { Component, Input } from '@angular/core';

import { TechnologyTeam } from './technology';

@Component({
  selector: 'app-technology-main',
  template: `
      <app-quest-summary></app-quest-summary>
      <app-technology-details [technology]="technology" [class.active]="technology.active">
        <app-technology-controls [technology]="technology"></app-technology-controls>
      </app-technology-details>
  `
})
export class TechnologyMainComponent {
  @Input() technology: TechnologyTeam;

}

QuestSummaryComponent with :host

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-quest-summary',
  template: `
      <p>meet my polymer princess and make her my wife.</p>
  `,
  styles: [`
        :host {
          display: block;
          background-color: green;
          color: white;
        }
    `]
})
export class QuestSummaryComponent {

}

TechnologyDetailsComponent:

import { Component, Input } from '@angular/core';

import { TechnologyTeam } from './technology';

@Component({
  selector: 'app-technology-details',
  template: `
      <h2>{{ technology.name }}</h2>
      <app-technology-team [technology]="technology"></app-technology-team>
      <ng-content></ng-content>
  `,
  styleUrls: ['./technology-details.component.css']
})
export class TechnologyDetailsComponent {
  @Input() technology: TechnologyTeam;

}

Component CSS File:

@import 'technology-details-box.css';
:host{
  display: block;
  border: 1px solid black;
}
:host(.active) {
  border-width: 3px;
}
:host-context(.theme-light) h2 {
  color: #800000;
  background-color: #ffcccc;
}
:host /deep/ h3 {
  font-style: italic;
}

Technology Details Box CSS:

:host {
  padding: 10px;
}

TechnologyTeamComponent:

import { Component, Input } from '@angular/core';
import { TechnologyTeam } from './technology';

@Component({
  selector: 'app-technology-team',
  template: `
      <h3>Team</h3>
      <ul>
            <li *ngFor="let member of technology.team">
                  {{ member }}
            </li>
      </ul>
  `,
  styleUrls: ['./technology-team.component.css']
})
export class TechnologyTeamComponent {
        @Input() technology: TechnologyTeam;

}

Technology Team Component CSS:

li {
  list-style-type: square;
}

TechnologyControlsComponent:

import { Component, Input } from '@angular/core';
import { TechnologyTeam } from './technology';

@Component({
  selector: 'app-technology-controls',
  template: `
      <style>
            button {
              background-color: #ff4d4d;
              color: white;
              border: 1px solid #777;
            }
      </style>
      <h3>Controls</h3>
      <button (click)="activate()">Activate</button>
  `
})
export class TechnologyControlsComponent {
  @Input() technology: TechnologyTeam;

  activate() {
    this.technology.active = true;
  }
}

Let's view the results in our Chromium Browser:

AccordeonComponent:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-accordeon',
  template: `
        <ngb-accordion>
          <ngb-panel title="{{ title }}">
            <ng-template ngbPanelContent>
              <ng-content></ng-content>
            </ng-template>
          </ngb-panel>
        </ngb-accordion>
  `
})
export class AccordeonComponent {
    @Input() title: string;

}

HostComponent:

import { Component } from '@angular/core';

@Component({
  selector: 'app-technologies',
  template: `
        <div class="row">
          <div class="col-6">
          <h2>{{ title }}</h2>
            <app-accordeon title="Angular 5 Details">
              One Framework. Mobile and desktop.
            </app-accordeon>
            <app-accordeon title="Angular Material 2 Details">
              Beautiful CSS. Optimized for Angular.
            </app-accordeon>
            <app-accordeon title="Angular CLI 1.5 Details">
              Tool for Scaffolding, Building && Maintaining Angular Applications.
            </app-accordeon>
        </div>
        <div class="col">
            <img class="w-100 p-3 rounded-circle" [src]="imageUrl" />
            <app-my-love></app-my-love>
        </div>
      </div>
  `
})
export class TechnologiesComponent {
  title = 'List of Technologies';
  imageUrl = './assets/polymer3.jpg';

}

Let's view the results in our Chromium Browser: