Add specific form to item inside *ngFor

ng-template
ngfor trackby
ngif
angular 4 ngfor multiple arrays
angular template reference variable
ngfor not working
angular list of objects
angular 4 array of objects

I have the following HTML structure:

<div *ngFor="let post of posts">
  <div>{{post.description}}</div>
  <ul *ngFor="let comment of post.comments">
    <li>
      {{comment.description}}
    </li>
  </ul>
  <div>
    <textarea placeholder="leave your comments here"></textarea>
    <button (click)="addComment(post)">Save</button>
  </div>
</div>

Considering it will contains a lot of posts on the page, how can I add dynamically a new comment to the specific post I am writing?

I would suggest to make a post component containing also a struktur (like array) holding your comments. Then apply *ngFor with your new component.

Maybe something like this: https://stackblitz.com/edit/angular-b9tkry

It ended like:

 <ng-container *ngFor="let post of posts">
   <app-post [post]="post"></app-post>
 </ng-container>

And on app-post:

<p>
  {{post.text}}
</p>
<ul *ngFor="let comment of post.comments">
  <li>{{comment}}</li>
</ul>
<textarea [(ngModel)]="newComment"></textarea>
<button (click)="addComment()">Add comment</button>

NgForOf, When items are added, moved, or removed in the iterable, the directive must re-​render The ngForOf directive is generally used in the shorthand form *ngFor . Reactive-forms in Angular is very powerful to handle changes in value, check the statuses, and perform validations on a form-field in particular form because of supporting FormGroup, FormControl

consider adding following function signature, to pass both related post and new comment:

<textarea placeholder="leave your comments here" #commentText></textarea>
<button (click)="addComment(post, commentText)">Save</button>

Then, assuming that comments are part of post model, just append new comment to already existing:

addComment(post: any, newComment: HTMLInputElement){
   post.comments.push(newComment.value);
}

Template syntax, Begin with the first form of data binding—interpolation—to see how much The component has a customer property and the *ngFor defines a customer template variable. When you add the disabled attribute, its presence alone initializes the While a list of items exists in another file, mock-items.ts , you can specify a  So you have a form and would like to add form fields dynamically from a response to a user event? It’s easy to do with Reactive Forms and FormArray.FormArray is a bit like FormGroup and it’s used in a very similar way, the difference being that it’s used as an array that wraps around an arbitrary amount of FormControl, FormGroup or even other FormArray instances.

since you are passing the post to the addComment method, you should be able to push to the same comments array.

addComment(post:any){
   post.comments.push(comment);
}

and add ngModel to your template,

<textarea placeholder="leave your comments here" [(ngModel)]='comment'

Angular NgFor, <ng-template> - the complete guide, In this post you're going to learn how to use Angular's NgFor directive to loop over data This is a function that we'll add in the component class: This will give us every index, starting from 0 , for each item in our collection. to fetch the contents of the script tag and use it as some form of HTML template. Can't bind to 'ngFor' since it isn't a known property of 'tr' This is because you have accidentally either used item in items instead of item of items, or forgot to add the let keyword at the beginning of the expression: Finding the index of a list element. A very common requirement is to add to a list the numeric index position of its element.

Angular Optimization: Use trackBy Option for *ngFor Directive, ngFor is one of the most popular directives in Angular — however, if not When we fill the form and click the Add User button, the values of the inputs If there are changes, we iterate through the added items and create the  To display that array, we need to use the ngFor directive in our components' template. How to use the ngFor directive? The ngFor directive does create the HTML-Element it is placed in as many times as there are elements in the array. So to create a list-element for each array element, we place the ngFor directive inside of the li tag.

Form inputs created with *ngFor ( and thus having same "name") are , bug report Following code is having different outputs when its inside of a <form ngNoForm> <div *ngFor="let item of arr; let i = index"> <input  Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers who build compelling user interfaces with Angular.

Angular 2, This way adding an additional outer div is not needed and furthermore the <​template> element won't be added to the DOM. The only elements added in the  PROBLEM STATEMENT Build a form to accept 3 hierarchical levels of data with the occurrences of fields in each level unknown. Also, use reactive form validation for validating all the fields. This

Comments
  • Your answer works correctly and is semantically excellent! Could you just include your link to edit Stackblitz in your reply? Thanks.
  • @PatrickLima Glad I could help. Hovewer keep in mind, that using template variables (i.e. those with #) is considered rather a poor practice. If you work with forms a lot of, please consider using template driven forms with ngModel (as described by Sajeetharan) or even better, reactive forms to separate business logic from view entirely. Template variables shall be used as last resort or when deadline is coming :)
  • I have transferred the correct answer to J. Knabenschuh's comment because it rightly uses a semantic standard and good practice. Thanks again for your help, even though it was not the final answer, it helped me to understand the problem very well and to learn that template variables are not recommended.
  • But on the <textarea> the [(ngModel)]='comment' reference is outside the comments *ngFor
  • yeah this is just an idea, you can follow thomas's answer