Here is a snippet of the template I am working on:
<tbody *ngFor='let list of lists'>
<tr>
<td>{{ list.name }}</td>
<td>{{ list.location }}</td>
<td>{{ list.type_id }}</td>
<td>{{ list.gos_prinad_id }}</td>
<td>{{ list.disloc_country_id }}</td>
<td>{{ list.adm_terr_id }}</td>
<td><a (click)="toggleElement()">view</a></td>
<td>{{ list.lat }}</td>
<td>{{ list.lon }}</td>
<td>{{ list.alt }}</td>
</tr>
<tr [hidden]="hideElement" *ngFor="let new_var of list.hops">
<td>{{ new_var.hop_type }}</td>
<td>{{ new_var.id_sl_hop }}</td>
<td>{{ new_var.hop_text }}</td>
</tr>
</tbody>
Also, I have a function called toogleElement() to toggle the display of additional data:
toggleElement(){
if(this.hideElement) {
this.hideElement = false;
}else{
this.hideElement = true;
}
Currently, a new form opens up every time I click on view.
<tr [hidden]="hideElement" *ngFor="let new_var of list.hops">
<td>{{ new_var.hop_type }}</td>
<td>{{ new_var.id_sl_hop }}</td>
<td>{{ new_var.hop_text }}</td>
</tr>
</tbody>
However, I wish for only one form to open at a time, rather than for each row.
Apologies for any language errors in my message.