69
rated 0 times
[
71]
[
2]
/ answers: 1 / hits: 8102
/ 4 Years ago, thu, july 23, 2020, 12:00:00
I'm customizing angular material select/autocomplete to allow nested dropdowns.
Here, I wanted to have one parent dropdown with many childs. If I expand particular parent dropdown, only childs of that dropdown should expand or collapse. Similarly, checkbox event should be selected in the same scenario.
I'm facing two issues.
- search/autocomplete is not working.
- Checking parent Checkbox should select all childs associated with it.
Can someone help me what I'm missing here.
Here is my code. STACKBLITZ
References:
https://stackblitz.com/edit/angular-evacck-qubgyy
https://stackblitz.com/angular/eboprqqnooy
export class SelectCustomTriggerExample {
toppings = new FormControl();
isExpandCategory: boolean = false;
toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
states = new FormControl();
expandDocumentTypes(category) {
console.log(expanding dropdown, category);
this.isExpandCategory = !this.isExpandCategory;
}
stateList: StateGroup[] = [{
letter: 'A',
names: ['Alabama', 'Alaska', 'Arizona', 'Arkansas']
}, {
letter: 'C',
names: ['California', 'Colorado', 'Connecticut']
}, {
letter: 'D',
names: ['Delaware']
}, {
letter: 'F',
names: ['Florida']
}, {
letter: 'G',
names: ['Georgia']
}, {
letter: 'H',
names: ['Hawaii']
}, {
letter: 'I',
names: ['Idaho', 'Illinois', 'Indiana', 'Iowa']
}, {
letter: 'K',
names: ['Kansas', 'Kentucky']
}, {
letter: 'L',
names: ['Louisiana']
}, {
letter: 'M',
names: ['Maine', 'Maryland', 'Massachusetts', 'Michigan',
'Minnesota', 'Mississippi', 'Missouri', 'Montana']
}, {
letter: 'N',
names: ['Nebraska', 'Nevada', 'New Hampshire', 'New Jersey',
'New Mexico', 'New York', 'North Carolina', 'North Dakota']
}, {
letter: 'O',
names: ['Ohio', 'Oklahoma', 'Oregon']
}, {
letter: 'P',
names: ['Pennsylvania']
}, {
letter: 'R',
names: ['Rhode Island']
}, {
letter: 'S',
names: ['South Carolina', 'South Dakota']
}, {
letter: 'T',
names: ['Tennessee', 'Texas']
}, {
letter: 'U',
names: ['Utah']
}, {
letter: 'V',
names: ['Vermont', 'Virginia']
}, {
letter: 'W',
names: ['Washington', 'West Virginia', 'Wisconsin', 'Wyoming']
}];
}<mat-form-field appearance=fill>
<mat-label>Toppings</mat-label>
<mat-select [formControl]=states multiple>
<mat-select-trigger>
{{states.value ? states.value[0] : ''}}
<span *ngIf=states.value?.length > 1 class=example-additional-selection>
(+{{states.value.length - 1}} {{states.value?.length === 2 ? 'other' : 'others'}})
</span>
</mat-select-trigger>
<mat-optgroup *ngFor=let group of stateList>
<div>
<mat-checkbox [checked]=group.selected (change)=toggleSelection(user)
(click)=$event.stopPropagation()>
{{group.letter}}
</mat-checkbox>
<button mat-button (click)=expandDocumentTypes(group)>
<mat-icon>keyboard_arrow_down</mat-icon>
</button>
</div>
<mat-option *ngFor=let name of group.names [value]=name
[ngClass]=isExpandCategory ? 'list-show' : 'list-hide'>
{{name}}
</mat-option>
</mat-optgroup>
</mat-select>
</mat-form-field>After selected the values, it should look like below (+1 or 2.. other).
More From » html
