This blog post describes step by step process to add like/love reactions in angular project.

Step 1:

Create a component by using the command ng g c e.g ng g c postReactions

Step 2:

<button  (click)="incrementLove()">
    love it{{post.loveCount}}
</button>

I have added a button in the html file of the post reactions component

Step 3:

On the blog page, we have a list of blog posts and we want to add post reactions in each post, so we have added the selector for post reactions at the bottom of each post inside the loop

<app-post-reactions [postType]='posts' [post]='post'><br>
</app-post-reactions>

Also, you can see that we have passed two variables from the parent component i.e blog page which will be passed to the child component i.e post reactions component.

Step 4

We have received the passed variables inside the child component i.e post reactions component by using the @Input()

@Input() postType: string;
@Input() post: any;

Step 5

Finally, we can create the incrementLove() function which will update the value inside the post document.

this.post.loveCount = this.post.loveCount+1;
this.afs.doc(this.postType+'/'+this.post.id).update(this.post).then(res => {
         //successfully posted
}, err => {
        //error
});