Angular "Like instagram excercise"

Angular
4

Hello @Heroe,

Here is the solution that I wrote for this exercise. If you need help setting up your project with the new Bootstrap Icon package, see my post on adding Bootstrap 4 to an Angular project.

Course: Angular 4: Beginner to Pro
Section: Building Re-usable Components (1h)
Video: 13- Exercise- LikeComponent

File: app.component.ts

...
  tweet = {
    body: 'Here is the body of a tweet...',
    isLiked: false,
    likesCount: 50
  }
...

File: app.component.html

...
<like
  [likesCount]="tweet.likesCount"
  [isActive]="tweet.isLiked"></like>
...

File: like.component.css

.bi-heart { color: #ccc; }
.bi-heart-fill { color: deeppink; }
.bi { cursor: pointer; }

File: like.component.html

<i (click)="onClick()" 
class="bi" 
[class.bi-heart]="!isActive" 
[class.bi-heart-fill]="isActive"
   ></i>
{{likes}}

File: like.component.ts

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

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

  @Input("isActive") isActive: boolean = false;
  @Input("likesCount") likes: number = 0;

  constructor() { }

  ngOnInit(): void {
  }

  onClick(){
    this.likes += this.isActive ? -1 : 1;
    this.isActive = !this.isActive;
  }
}

In a subsequent lecture, he modifies the code from “video 13” (above) to use the ngClass directive. Here’s my solution:

Class: Angular 4: Beginner to Pro
Section: Directives (1h)
Video: 9- ngClass

File: like.component.html

<!-- Bootstrap 4 -->
<i 
class="bi" 
(click)="onClick()" 
[ngClass]="{
    'bi-heart':!isActive,
    'bi-heart-fill':isActive
}"
   ></i>
{{likes}

I wish you the best of luck,

Chris

1 Like