I utilize a table to display data retrieved from my API. In my .ts component, I use the following method to access the service data:
getBloques() {
this.configuracioncvService.getBloques()
.subscribe(res => {
let bloquesOrdenados = _.orderBy(res,['ordenCompleto'], ['asc'])
this.configuracioncvService.bloques = bloquesOrdenados;
console.log('BLOQUESRESTAPI', bloquesOrdenados)
})
}
The service method is defined as:
getBloques() {
return this.http.get<Bloque[]>(this.URL_BLOQUES);
}
To present the data in the HTML, I use the following code:
<table class="table" id="tabla">
<thead>
<tr class="d-flex">
<th class="col-3">Bloque</th>
<th class="col-3">Orden</th>
<th class="col-3">Guardar</th>
<th class="col-3">Ingresar a Bloque</th>
</tr>
</thead>
<tbody>
<tr class="d-flex" *ngFor="let bloque of configuracioncvService.bloques">
<td class="col-md-3">{{bloque.nombre}}</td>
<td class="col-md-3">
<mat-form-field>
<input type="number" matInput placeholder="Orden" [value]="bloque.ordenCompleto" [(ngModel)]="bloque.ordenCompleto">
</mat-form-field>
</td>
<td class="col-md-3">
<button class="btn btn-secundary" (click)="editBloque(bloque)">
<i class="material-icons">save</i>
</button>
</td>
<td class="col-md-3">
<button mat-raised-button color="primary" [routerLink]="['/bloque-completo/', bloque.nombre]">
<i class="material-icons">east</i>
</button>
</td>
</tr>
</tbody>
</table>
To achieve editing functionality for all objects with a single button, I have attempted using formArray and storing form values in an array. However, I am unsure how to loop through the array and edit.
https://stackblitz.com/edit/angular-formgroup-ngxxam?file=app%2Fapp.component.ts