Angular 2 Twitter heart like icon component.

like.component.ts

import {Component, Input, Output, EventEmitter} from 'angular2/core'

/**
 * <like [totalLikes]="post.totalLikes" [iLike]="post.iLike" (change)="oniLikeChange($event)"></like>
 */
@Component({
    selector: 'like',
    template: `
        <li
            class="glyphicon glyphicon-heart"
            [class.highlighted]="iLike"
            (click)="onClick()"
        >
        </li>
    `,
    styles: [`
        .glyphicon-heart {
            color: #ccc;
            font-size: 64px;
            cursor: pointer;
        }
        .highlighted {
            color: deeppink;
        }    
    `]
})
export class LikeComponent {
    @Input() totalLikes = 0;
    @Input() iLike = false;

    @Output() change = new EventEmitter();

    onClick() {
        this.iLike = !this.iLike;
        this.totalLikes += this.iLike ? 1 : -1;
        this.change.emit({newValue: this.iLike, newTotal: this.totalLikes});
    }
}