Component With Input && Output

app.component.html

<favorite [is-favoried]="false"  (change)="whenFavIsChanged($event)"  ></favorite>

favorite.component.html

  <div  class="cont"  (click)="onClickFav()">

  <div *ngIf="isFavoried; else elseBlock" > 
  <i style="color:#ff4a4a;" class="material-icons"> favorite </i> </div>

  <ng-template #elseBlock> <i class="material-icons"> favorite_border </i> </ng-template>
</div>

favorite.component.ts

import { Component, OnInit ,Input , Output, EventEmitter, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'favorite',
  templateUrl: './favorite.component.html',
  styleUrls: ['./favorite.component.css']
  //encapsulation:ViewEncapsulation.Emulated
})
export class FavoriteComponent implements OnInit {

  @Input('is-favoried') isFavoried:boolean;
  @Output('change') click = new EventEmitter();

  constructor() { }

  ngOnInit() {

    localStorage.setItem('dataSource', 'Atef Nouri');
    console.log(localStorage.getItem('dataSource'));
    
  }

  public onClickFav = () => {

    this.isFavoried =  !this.isFavoried;
    console.log('the heart was cliked');
    this.click.emit({newVal:this.isFavoried});
  }



}