The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Write CSS Inside of Angular 2 Components

Write CSS Inside of Angular 2 Components

2:57
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.
Watch this lesson now
Avatar
egghead.io

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

Avatar
Goma Games

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?