Write CSS Inside of Angular 2 Components

Angular5 - 6

Share this video with your friends

Many Components require different styles based on a set of conditions. Angular 2 helps you style your Components by allows you to define CSS and styles inline, then choosing which styles to use based on the current values in your Controller.

Goma Games

~ 8 years ago

in @angular/core@2.0.0-rc.2

using two root nodes in template <style> and <div> complained and did not work for me.

@Component({
  selector: 'todo-item-renderer',
  template: `
  <style>
    .completed{
      text-decoration: line-through;
    }
  </style>
  <div>
    <span [ngClass]="'completed'">{{todo.title}}</span>
    <button (click)="toggle.emit(todo)">Toggle</button>
  </div>`
})

instead, use the styles property for the @Component decorator works

@Component({
  selector: 'todo-item-renderer',
  styles: [`
    .completed{
      text-decoration: line-through;
    }
  `],
  template: `<div>
    <span [ngClass]="'completed'">{{todo.title}}</span>
    <button (click)="toggle.emit(todo)">Toggle</button>
  </div>`
})

hth.