Cacher is the code snippet organizer for pro developers

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

@Component({
  selector: 'app-like',
  templateUrl: './like.component.html',
  styleUrls: ['./like.component.css']
})
export class LikeComponent {

  @Input('isActive') isActive: boolean = false;
  @Input('likesCount') likesCount: number;

  onLike() {
    if(this.isActive) {
      this.isActive = false;
      this.likesCount--;
    } else {
      this.isActive = true;
      this.likesCount++;
    }
  }

}

<i class="fa fa-heart fa-2x" (click)="onLike()" [class.active]="isActive"></i> {{ likesCount }}

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  tweet = {
    body: '...',
    likesCount: 10,
    isLiked: false
  }

}

<!-- 
  Like Feature 
  [likesCount] and [isActive] are from 'LikeComponent'
-->
<app-like [likesCount]="tweet.likesCount" [isActive]="tweet.isLiked"></app-like>