samedi 1 septembre 2018

approach while creating reusable table in angular 6

in angular, i have xyz component, which have child component table component and table component have table row component.

greenProduction=[{firstName:'test',surname:'test1',phoneNumber:'1234567889'}]
yellowProduction=[{firstName:'test',surname:'test1',phoneNumber:'1234567889',gender:'M',city:'Hyderabad'}]

yellowProduction have 2 extra properties.

xyz.component looks like

<div>
<app-table source="greenProduction">
<div>
<div>
<app-table source="yellowProduction">
<div>

table.component.html looks like with *ngFor

<div >
<app-table-row  [item]="item" (editItem)="editItem($event)" (deleteItem)="deleteItem($event)"></app-table-row>
</div>

table-row.component.html looks like with

<div>
 
 

<button (click)="editgreenItem(item)"> edit</button>
<button (click)="deletegreenItem(item)" > remove  </button>
</div>

Question 1 : should I able to use same table for both source ? greenProduction and yellowProduction ?

Question 2 : if #1 question answer is yes, how can I add 2 extra properties based on yellow product source in table-row component?

Question 3: how can I handle edit and delete event for both source? what angular patterns people using ?

This event @output emitted to app-table-row.ts = > app-table.component.ts have below events :

deletegreenItem($event){
  // how can we decide green or yellow production edit events call ? – I do not want to use if condition.
}

editgreenItem($event){
  // how can we decide green or yellow production delete events? – I do not want to use if condition.
}

For example :

When I clicked on delete on 1st table – I wanted to show “are you sure want to delete green production.” and go for it’s service call. When I clicked on delete on 2st table – I wanted to show “are you sure want to delete yellow production.” and go for it’s service call.

Question 4 : I am looking for generic solution, how can we use table component with row component N numbers of times in my app , means future if I have “red component” I do not like to add any if condition anywhere.

or any suggestion welcome :)

Thanks in advance.

Aucun commentaire:

Enregistrer un commentaire