title: Creating dynamic buttons in angular material
body: <p>I am creating an angular application. I have created 5 mat flat buttons using angular material.
  code</p>
  
  <pre><code>&lt;button mat-flat-button [ngClass]="this.selected == 1 ? 'tab_selected' : 'tab_unselected'" (click)="change(1)"&gt;B-L1&lt;/button&gt;
  &lt;button mat-flat-button [ngClass]="this.selected == 2 ? 'tab_selected' : 'tab_unselected'" (click)="change(2)"&gt;B-L2&lt;/button&gt;
  &lt;button mat-flat-button [ngClass]="this.selected == 3 ? 'tab_selected' : 'tab_unselected'" (click)="change(3)"&gt;B-L3&lt;/button&gt;
  &lt;button mat-flat-button [ngClass]="this.selected == 4 ? 'tab_selected' : 'tab_unselected'" (click)="change(4)"&gt;B-L4&lt;/button&gt;
  &lt;button mat-flat-button [ngClass]="this.selected == 5 ? 'tab_selected' : 'tab_unselected'" (click)="change(5)"&gt;B-FC&lt;/button&gt;
  </code></pre>
  
  <p>When clicked on each button, a function is called from .ts file. code</p>
  
  <pre><code>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)
  }
  </code></pre>
  
  <p><code>this.getData(this.floor)</code> makes an api call and gets data for that floor. Here B is a block, and L1,L2,L3.. are floors in that block. </p>
  
  <p>I want to add a new block D which has L1,L2,L3,L4 floors. I can add more buttons for DL1,DL2,DL3 by adding more buttons manually. But how can i do it dynamically like if I select a master button B or D and floors within that block are displayed with the current functionality not being lost?</p>
  
  <p>Thanks.</p>