@Input Decorator (Twitter's Like feature)
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>