Two dropdown lists are available, with one returning an array of objects once a value is selected from it.
I am looking to dynamically display the table when the selection occurs.
<li class="mat-form-field--inline">
<mat-form-field>
<mat-label>Select Application Reference</mat-label>
<select
[(ngModel)]="selectedObject"
(change)="getFammille($event.target.value)"
matNativeControl
>
<option
*ngFor="let application of applications; let i = index"
[value]="applications[i].reference"
>
{{ application.reference }}
</option>
</option>
</select>
</mat-form-field>
<mat-form-field>
<mat-label>Select a family</mat-label>
<select
[(ngModel)]="familyName"
(change)="getCaracteristiques($event.target.value)"
matNativeControl
>
<option
*ngFor="let famille of familleArray; let i = index"
[value]="famille.nom"
>
{{ famille.nom }}
</option>
</option>
</select>
</mat-form-field>
</li>
// This field must be selected to display the Table
<mat-form-field>
<mat-label>Select a family</mat-label>
<select
[(ngModel)]="familyName"
(change)="getCaracteristiques($event.target.value)"
matNativeControl
>
<option
*ngFor="let famille of familleArray; let i = index"
[value]="famille.nom"
>
{{ famille.nom }}
</option>
</option>
</select>
</mat-form-field>
<table mat-table [dataSource]="this.caracteristiques" class="mat-elevation-z8">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>type</th>
<td mat-cell *matCellDef="let carac">{{ carac.type }}</td>
</ng-container>
<ng-container matColumnDef="NumeroOrdre">
<th mat-header-cell *matHeaderCellDef>fields</th>
<td mat-cell *matCellDef="let carac">{{ carac.fields }}</td>
</ng-container>
<ng-container matColumnDef="Titulaire">
<th mat-header-cell *matHeaderCellDef>name</th>
<td mat-cell *matCellDef="let carac">{{ carac.name }}</td>
</ng-container>
<ng-container matColumnDef="UniteCertifie">
<th mat-header-cell *matHeaderCellDef>label</th>
<td mat-cell *matCellDef="let carac">{{ carac.label }}</td>
</ng-container>
<ng-container matColumnDef="Etat">
<th mat-header-cell *matHeaderCellDef>values</th>
<td mat-cell *matCellDef="let carac">{{ carac.values }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
I am encountering an error as I haven't found a way to prevent displaying the table before selecting the second field. Is there a way to add this condition?