Append HTML after adding record in Angular

Question

I have an Angular (v7) project and there is a comment list on a component as shown below. I list comments in an *ngFor loop and add new ones to the list. However I reload the list after adding a new comment and I think there is a better way i.e. appending the newly added comment by combining it with HTML that I have used with JavaScript before. But unfortunately I have not managed to define it (maybe due to the loop). Is it possible in Angular?

#comment-list.html:

<div *ngFor="let comment of comments">
    <div class="p-col"> {{ comment.UserName }} </div>
    <div class="p-col-12" [innerHTML]="comment.Body"></div>
</div>

I call the method below after adding a new comment:

#comment-list.ts:

listComments() {
    this.loading = true;
    service.listComments(this)
        .subscribe(data => {
            this.records = data.Data;
            this.loading = false;
        });
}

I think I should re-create an HTML list using newly added comment's data and append it to the list but how?

this.comments.push(myNewComment) or this.records.push(myNewComment)... wala — Isaac Vidrine
– Isaac Vidrine, Commented May 1, 2019 at 20:41
@IsaacVidrine Thanks a lot, it seems to be OK but I just need some modification out of the scope. Regards... — Jack
– Jack, Commented May 1, 2019 at 21:34

Eiman · Accepted Answer · 2019-05-01 21:02:24Z

1

You can use the Spread operator to do that. Suppose you have defined the newComment object. To update the list in the view, just:

this.comments = [newComment, ...this.comments];

It will insert the newComment object at the first place of the list.

answered May 1, 2019 at 21:02

Eiman

7717 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jack Over a year ago

Thanks a lot, but push method seems to be easier to apply. Voted up ;)

user4851087 Over a year ago

@Willys I wouldnt recommend using push method. Using spread operator is safe than push and basically you create new array of comment without modify the old one

Isaac Vidrine Over a year ago

@NgôHùngPhúc this could easily be done with unshift as well, you don't need spread operator

Collectives™ on Stack Overflow

Append HTML after adding record in Angular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related