13. Styles

Good thing, style applied only to this component!

favorite.component.ts

@Component({
  selector: 'favorite',
  templateUrl: 'app/favorite.template.html', 
  styles: [],
  styleUrls: [] // need extra http requeset, same concept as template
})

change to

@Component({
  selector: 'favorite',
  templateUrl: 'app/favorite.template.html', 
  styles: [`
    .glyphicon-star {
        color: orange;
    }
  `]

})

app.component.html

add another component in to show that style aplpied only to favorite component.

<h1>
  {{title}}
</h1>
<i class="glyphicon glyphicon-star"></i>
<favorite [is-favorite]="post.isFavorite" (change)="onFavoriteChange($event)">
</favorite>