CODEWITHSUNDEEP
javascriptangularangular5
Subhan
Subhan

Reputation: 1634

Angular 5 dynamically add & delete a component instance

I'm trying to create a table that looks like a spreadsheet with editable inputs inside each td. I'm using Angular's ComponentFactoryResolver as explained here, to add a row to the table when user clicks the add button.

Once the row is added, I use EventEmitter to emit all the data of that row as the last column value is changed.

I've tried to re implement the same functionality on this StackBlitz.

I'm having the following issues:

  1. I'm unable to emit data from the newly added components. (Check Console)
  2. Once I add a new row, the first row (not dynamic) also stops giving me the emitted data.
  3. I'm not sure how to delete a row if user don't needs it as I don't have the reference to it.

Upvotes: 1

Views: 1201

Answers (1)

Rukshan Dangalla
Rukshan Dangalla

Reputation: 2590

This is what I am suggesting. You can create a list of row objects in the parent (table) component and use *ngFor to loop it over. 

<app-row 
   *ngFor="let row of rowList" 
   [row]="row" 
   (entryUpdate)="onEntryUpdated($event)">
</app-row>

Please have a look at this

Upvotes: 4

Related Questions