Thank you for your responding to my article.

I believe you're asking me to hide dependent input fields that don't have any items. In this case, inputs for the state and city.

Yep, it is possible to hide or show it.

We can put async pipe observable subscription on ng-container which will be the parent element of div with "grid-item" class.

And we can add *ngIf to the div element to hide or show inputs.

Eg.

<ng-container *ngIf="states$ | async as states">

<div class="grid-item" *ngIf="states.length > 0">

<mat-form-field>

<mat-label>State</mat-label>

<mat-select name="state" [formControl]="stateControl">

<mat-option [value]="null">None</mat-option>

<mat-option

*ngFor="let state of states"

[value]="state"

>

{{ state.name }}

</mat-option>

</mat-select>

</mat-form-field>

</div>

</ng-container>

you can refer below link for this.

https://stackblitz.com/edit/angular-16-material-starter-uwphn3?file=src%2Fapp%2Fapp.component.html

I hope this resolves your query.