Angular "Like instagram excercise"

why i got this error in coding exactly like in the video , any help?

i solved but i cant see the icon in action on the browser, any help??? please

I’m guessing that you realized that the closing curly brace of the AppComponent needed to be placed below the tweet object. That would fix this error.

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


File: like.component.css

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

File: like.component.html

<i (click)="onClick()" 

File: like.component.ts

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

  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 {

    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 wish you the best of luck,


1 Like

InstaZoomHD helped me in this problem i got the solution of my problem after your post

1 Like

Yep, it’s so nice. Can u try my website and review it: