Twitter heart vote counter using angular and Firebase cloud firestore database

I want to have a twitter styled heart like counter to count the total number of upvotes to the posts, the upvotes sud be updated in firebase cloud firestore and also display the total number of upvotes below the heart counter.

I'm on Angular version 5.2.9 and "angularfire2": "^5.0.0-rc.6"

I have this semi-finished code here.

My child component (heart.component.ts) is

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

@Component({
  selector: 'app-heart',
  templateUrl: './heart.component.html',
  styleUrls: ['./heart.component.scss']
})
export class HeartComponent {

  @Input() totalLikes = 0;
  @Input() love = false;

  @Output() change = new EventEmitter();

  heartClicked() {
    this.love = !this.love;
    this.totalLikes += this.love ? 1 : 0;
    this.change.emit({ newValue: this.love, newTotal: this.totalLikes });
  }
} 

Child component html is (heart.component.html)

<div class="love-this">
  <div class="heart" (click)="heartClicked()" [class.heart-beat]="love">
    <span class="heartCount"></span>
  </div>
</div>

Child component css (heart.component.scss) is

// TWITTER HEART

.heart {
  width: 91px;
  height: 116px;
  position: absolute;
  transform: translate(-45%, -50%);
  background: url(https://cssanimation.rocks/images/posts/steps/heart.png) no-repeat;
  background-position: 0 0;
  cursor: pointer;
  transition: background-position 1s steps(28);
  transition-duration: 0s;
  &.heart-beat {
    transition-duration: 1s;
    background-position: -2800px 0;
  }
}

.love-this {
  position: absolute;
  right: 2.2rem;
  top: 33px;
}

.heartCount {
  position: absolute;
}

The parent component html contains the child component selector like

<app-heart [totalLikes]="project.totalLikes" [love]="project.love" (change)="oniLikeChange($event)"></app-heart>

where projects is the cloud firestore collection name used like *ngFor="let project of projects | async; to iterate through the objects and here projects is used in the parent component like

projectCollectionRef: AngularFirestoreCollection<Project>;
  projects: Observable<Project[]>;
  constructor(
    private afs: AngularFirestore
  ) {
    this.projectCollectionRef = this.afs.collection('projects');
    this.projects = this.homeCollectionRef.valueChanges();
  }

Please note I don't want to use any third party npm package or libraries pure angular with typescript is my requirement.

Sorry for the long post Any help will be heartily appreciated! Thanks in advance :)