I've been working on an angular application where I created 5 mat flat buttons using angular material.
<button mat-flat-button [ngClass]="this.selected == 1 ? 'tab_selected' : 'tab_unselected'" (click)="change(1)">B-L1</button>
<button mat-flat-button [ngClass]="this.selected == 2 ? 'tab_selected' : 'tab_unselected'" (click)="change(2)">B-L2</button>
<button mat-flat-button [ngClass]="this.selected == 3 ? 'tab_selected' : 'tab_unselected'" (click)="change(3)">B-L3</button>
<button mat-flat-button [ngClass]="this.selected == 4 ? 'tab_selected' : 'tab_unselected'" (click)="change(4)">B-L4</button>
<button mat-flat-button [ngClass]="this.selected == 5 ? 'tab_selected' : 'tab_unselected'" (click)="change(5)">B-FC</button>
Each button triggers a function in the .ts file when clicked.
change(n) {
this.selected = n;
if (n == 3){
this.floor = 'BL3'
}
else if (n==4){
this.floor = 'BL4'
}
else if (n==2){
this.floor = 'BL2'
}
else if(n==1){
this.floor = 'BL1'
}
else if(n==5){
this.floor = 'BFC'
}
console.log('changing floor to' + this.floor)
this.getData(this.floor)
}
this.getData(this.floor) triggers an API call to retrieve data for that specific floor. The blocks are represented by B and the floors within each block are L1, L2, L3, etc.
I now need to add a new block D with floors L1, L2, L3, and L4. Instead of manually adding more buttons for DL1, DL2, DL3, how can I dynamically display them based on selecting either the B or D master button while maintaining the current functionality?
Any suggestions would be greatly appreciated. Thank you!