(Angular Material) with AutoComplete to create dropdown with hierarchical classification

Effects such as

Code implementation

1. Import Module

　import {MatAutocompleteModule} from ‘@angular/material/autocomplete‘;

@NgModule ({
imports:[
Matautocompletemodule
]
})

2. Write List Contents

This . Membernamelist = [ {onoffdist: ' オン ', 　　　　items: [' Ding 1 ', ' Xu 2 ', ' Beyo 3 '] 　　　　 },{onoffdist: ' オフ ', 　　　　 items: [' Zhao 4 ', ' Lee 5 '] 　　　　 } ];

3. HTML implementation

<input type="text" name="MemberName" matinput Formcontrolname="MemberName" [matautocomplete]="MemberName" [value]="Costdata.teammember"/> <mat-autocomplete style="font-size:12px; height:30px; " #memberName="Matautocomplete"> 　　 <mat-optgroup< Span style= "color: #d4d4d4;" > *ngfor= "let NameList of Membernamelist " [label" = <mat-option style="font-size:12px; height:30px; " *ngfor="Let name of Namelist.items" 　　　　　　 [value]="name"> 　　　　　　　　 {{name}}</mat-option> 　　　　　　 </mat-optgroup> 　　　　 </mat-autocomplete> completed.

(Angular Material) with AutoComplete to create dropdown with hierarchical classification