11. Output Properties

Raise custom event

favorite.component.ts

import { Component,Input,Output,EventEmitter} 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;   // currently private, not exposed to outside
  @Input('is-favorite') isFavorite = false;   
  
  @Output() change = new EventEmitter(); // class we use to publish events

  onClick(){
      this.isFavorite = !this.isFavorite;
      this.change.emit({newValue: this.isFavorite}); // pass data associated with event
  }
} 

app.component.html


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

app.component.ts

export class AppComponent {
  post = {
    title:"Title",
    isFavorite: true
  }

  onFavoriteChange($event){
    console.log($event);
  }
}