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