The Angular Material accordion component is a key feature in my Angular project.
Utilizing an ngFor loop to iterate through the information stored in menuItems, I dynamically create a new expansion panel for each item. With two components in play, I seamlessly inject my menu item into the HTML structure containing the panels.
Here is a snippet of my current implementation:
<mat-accordion *ngFor="let menuItem of menuItems">
<confmenu menuItem={{menuItem}}></confmenu>
</mat-accordion>
Within the confmenu (child template), the code looks like this:
<mat-expansion-panel [expanded]= "expandedItem === menuItem" (opened)= "newExpandedItem()">
<mat-expansion-panel-header>
<mat-panel-title>
{{menuItem}}
</mat-panel-title>
<mat-panel-description>
{{menuDescription}}
</mat-panel-description>
</mat-expansion-panel-header>
<mat-form-field class="mat-expansion-panel-body">
<mat-select (change)="selectConfig($event.value)">
<mat-option *ngFor="let option of menuOptions" [value]="option" (click)="selectConfig(option)">
{{option}}
</mat-option>
</mat-select>
</mat-form-field>
</mat-expansion-panel>
Meanwhile, in the child component's TypeScript file:
expandedItem:string;
newExpandedItem(){
this.expandedItem = this.menuItem;
}
The TypeScript logic for the component is as follows:
/** @title Basic menu */
@Component({
selector: 'confmenu',
templateUrl: './confmenu.component.html',
styleUrls: ['./confmenu.component.scss']
})
export class ConfigurationMenu implements OnInit, OnDestroy {
@Input() menuItem: string;
expandedItem:string;
constructor() {}
ngOnInit() {
// Initializing the first menu item
this.expandedItem = "firstItem"
}
ngOnDestroy() {
// No action needed at the moment
}
selectConfig(value:string){
this.selectedConfig = value;
}
newExpandedItem(){
this.expandedItem = this.menuItem;
}
}
Any suggestions on how to implement functionality that ensures panels close upon the click of another panel? Currently, they all remain open when another one is clicked.