title: Angular Material Table Toggle Button if Status is equal to 'Closed'
body: <p>I have a Angular Material data table (Tickets Table) that contains all tickets data.
  There is a 'Status' parameter that contains either 'Open', 'In Progress' and 'Closed'.
  In the Action column, there is 3 buttons See More, Update Progress &amp; Track Ticket.
  I want to hide the 'Update Progress' button if the Status is equal to 'Closed'.</p>
  <p><a href="https://i.stack.imgur.com/Oq6NN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Oq6NN.png" alt="enter image description here" /></a></p>
  <p>Here is the code for table HTML that I tried but not work.</p>
  <pre><code>&lt;!-- Status Column --&gt;
        &lt;ng-container matColumnDef=&quot;status&quot;&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt;Status&lt;/th&gt;
          &lt;td mat-cell *matCellDef=&quot;let element&quot; id=&quot;status&quot;&gt;
            {{ element.status }}
          &lt;/td&gt;
        &lt;/ng-container&gt;
  
        &lt;!-- Action Column --&gt;
        &lt;ng-container matColumnDef=&quot;action&quot;&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt;Action&lt;/th&gt;
          &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt;
            &lt;button mat-icon-button [matMenuTriggerFor]=&quot;menu&quot;&gt;
              &lt;mat-icon&gt;more_vert&lt;/mat-icon&gt;
            &lt;/button&gt;
            &lt;mat-menu #menu=&quot;matMenu&quot;&gt;
              &lt;button mat-menu-item (click)=&quot;openDialog(element)&quot;&gt;
                &lt;mat-icon&gt;assignment&lt;/mat-icon&gt;
                &lt;span&gt;See More&lt;/span&gt;
              &lt;/button&gt;
              &lt;div *ngIf=&quot;isShowDiv[element.id]&quot;&gt;
                &lt;button mat-menu-item routerLink=&quot;updatestatus/{{ element.id }}&quot;&gt;
                  &lt;mat-icon&gt;update&lt;/mat-icon&gt;
                  &lt;span&gt;Update Progress&lt;/span&gt;
                &lt;/button&gt;
              &lt;/div&gt;
              &lt;button mat-menu-item routerLink=&quot;trackticket/{{ element.id }}&quot;&gt;
                &lt;mat-icon&gt;drafts&lt;/mat-icon&gt;
                &lt;span&gt;Track Ticket&lt;/span&gt;
              &lt;/button&gt;
            &lt;/mat-menu&gt;
          &lt;/td&gt;
        &lt;/ng-container&gt;
  </code></pre>
  <p>Typescript code:</p>
  <pre><code>
  public isShowDiv: { [key: number]: boolean } = {};
  
  ngOnInit(): void {
      // Get all data from formdata
      var obj = JSON.parse(localStorage.getItem('formdata')!);
  
      // Set data to dataSource
      this.dataSource = new MatTableDataSource(obj);
  
      // Looping through localStorage's data length
      for (var i = 0; i &lt; obj.length; i++) {
  
        // Filtering the Update Progress button if status is closed
        console.log('Status', JSON.stringify(obj[i].status));
        
        if (obj[i].status == 'Closed') {
          this.isShowDiv[obj[i].id] == true;
        } else {
          this.isShowDiv[obj[i].id] == false;
        }
      }
  </code></pre>