Angular CDK Overlay not displaying in MatAutocomplete and Overlay basic example

I was trying to get autocomplete to work but it refused to display except once which I cannot replicate. Then tried tried designing something similar using the Overlay basic example but still not working.


<!-- styles.scss -->
@import '../../../node_modules/@angular/material/prebuilt-themes/cyan-orange.css';
@import "../../../node_modules/@angular/cdk/overlay-prebuilt.css";

<mat-form-field appearance="outline" class="w-100">
<mat-label i18n>Tags</mat-label>
<mat-chip-grid #tagsChipList>
@for (tag of tagsSignal(); track tag.id) {
<mat-chip-row
matChipRemove
[removable]="true"
(removed)="onRemoveTag(tag)"
>
{{ tag.name }}
<button matChipRemove [attr.aria-label]="'remove ' + tag.name">
<mat-icon>cancel</mat-icon>
</button>
</mat-chip-row>
}
<input
#tagInput
name="close-outline"
[matChipInputFor]="tagsChipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matAutocomplete]="autocompleteTags"
[(ngModel)]="currentTag"
(matChipInputTokenEnd)="onAddTagInput()"
/>
</mat-chip-grid>
<mat-autocomplete
class="autocomplete cdk-overlay-container"
#autocompleteTags="matAutocomplete"
(optionSelected)="onAddTag($event)"
>
@for (tag of filteredTags(); track tag.id) {
<mat-option [value]="tag.id">
{{ tag.name }}
</mat-option>
}
</mat-autocomplete>
</mat-form-field>




Continue reading...