Template inline styles

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

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

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

  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="9635dc0d-e63b-dba1-8c14-d7c25d1980b3" href="/en/latest/styling/assets/hero-team.component.css">
      <li *ngFor="let member of hero.team">