Template inline styles

This is the documentation for Angular 6.
You can switch to the latest version Angular 7.

You can embed CSS styles directly into the HTML template by putting them inside <style> tags.

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

You can also write tags into the component's HTML template.

@Component({
  selector: 'app-hero-team',
  template: `
    <!-- We must use a relative URL so that the AOT compiler can find the stylesheet -->
    <link rel="stylesheet" router-link="18dfec43-02bc-fea5-4bd8-1e42509cc014" href="/en/v6/styling/assets/hero-team.component.css">
    <h3>Team</h3>
    <ul>
      <li *ngFor="let member of hero.team">
        {{member}}
      </li>
    </ul>`
})