Issue with recreation of Angular2 component with Meteor


#1

I am working on a Forum type app using Meteor + Angular2. In my app there are Posts/Articles (any user created discussion topic). Users comment on that Post/Article. And there are replies to those comments. Comments are Level 1 and Replies are level 2. Posts contains Comments
and Comments contain Replies.

In my app i am showing one article in this way:

1) post-details.html
{{post.title}} ..etc
<comment-list [postId]="post._id"></comment-list>

2) comment-list.html
<div *ngFor="let comment of commentList">
<comment-details [comment]="comment"> </comment-details>

3) comment-details.html
{{comment.text}} ..etc
{{comment.likes}} {{comment.dislikes}}
<reply-list [commentId]="comment._id"></reply-list>

4) reply-list.html
<div *ngFor="let reply of replyList">
<reply-details [reply]="reply"> </reply-details>

5) reply-details.html
{{reply.text}} etc

Problem is if i like/dislike any of the comment on my post/article Angular2 recreates the comment-details. Due to which that particular comment section with its replies flickers i.e. are recreated.

It is understandable why it is happening. When I like/dislike a comment then i update the vote details in DB. It then updates the commentList in comment-list.html with new comment information. It sends
the updates to comment-details with new comment information.

Is there a way i can get the updates but stop this recreating of comment-details everytime i like/dislike the comment.