1

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.
Subhan
  • 1,544
  • 3
  • 25
  • 58

1 Answers1

4

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

Rukshan Dangalla
  • 2,500
  • 2
  • 24
  • 29
  • Many Thanks, Can you also recommend something regarding deleting a specific row? – Subhan Apr 28 '18 at 04:23
  • 1
    Stackblitz updated. Please have look and sir if this is the answer you were looking, please mark it as accepted. May be you can come-up with a better solution for removing elements from array. – Rukshan Dangalla Apr 28 '18 at 04:33
  • Thank you, I've got a right path to work on. I really appreciate your help. – Subhan Apr 28 '18 at 04:38
  • Happy that I could help. :) – Rukshan Dangalla Apr 28 '18 at 04:47
  • I agree this is the better way to go – yurzui Apr 28 '18 at 05:13
  • @RukshanDangalla https://stackblitz.com/edit/angular-2xtrfj I'm trying to add headers on top. The styling gets messed up. May be you could have a look please. Look at the template of table.component. Thanks – Subhan Apr 28 '18 at 05:52
  • 1
    Here is fixed stackblitz https://stackblitz.com/edit/angular-rb3im2 What I did was, add attribute selector instead of normal selector. You can read more about this on https://stackoverflow.com/questions/34588933/how-to-remove-replace-the-angular2-components-selector-tag-from-html – Rukshan Dangalla Apr 28 '18 at 06:08
  • I understand what you did there. It fixed the issues however, I had to write some CSS to fix the resulting style issues. Thanks Mate. – Subhan Apr 29 '18 at 00:42