9.Building a Favorite Component

favorite.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'favorite',
  template: // demonstrate class bindings below 
  `
  <i
    class="glyphicon"
    [class.glyphicon-star-empty]="!isFavorite" 
    [class.glyphicon-star]="isFavorite"
    (click)="onClick()">
  </i>
  `
})

export class FavoriteComponent { 
  isFavorite = false;

  onClick(){
      this.isFavorite = !this.isFavorite;
  }
} 

app.component.ts

import { Component } from '@angular/core';
import {CoursesComponent} from './courses.component'
import {AuthorsComponent} from './authors.component'
import {FavoriteComponent} from './favorite.component'

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  directives: [CoursesComponent,AuthorsComponent,FavoriteComponent],
  styleUrls: ['app.component.css']
})
export class AppComponent {
  title = 'Hello World!';
  imageUrl  = 'https://www.gstatic.com/images/branding/googlelogo/2x/googlelogo_color_284x96dp.png';
  isActive = true;

  onClick($event){
    $event.stopPropagation(); // to stop propagation of events bubbling up
    console.log("Clicked",$event);
  }

  onDivClick(){
    console.log("Handled by Div");
  }

}

app.component.html

<h1>

  {{title}}

</h1>

<favorite>

</favorite>