Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

257
Views
Angular Material Table Toggle Button if Status is equal to 'Closed'

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 & Track Ticket. I want to hide the 'Update Progress' button if the Status is equal to 'Closed'.

enter image description here

Here is the code for table HTML that I tried but not work.

<!-- Status Column -->
      <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef>Status</th>
        <td mat-cell *matCellDef="let element" id="status">
          {{ element.status }}
        </td>
      </ng-container>

      <!-- Action Column -->
      <ng-container matColumnDef="action">
        <th mat-header-cell *matHeaderCellDef>Action</th>
        <td mat-cell *matCellDef="let element">
          <button mat-icon-button [matMenuTriggerFor]="menu">
            <mat-icon>more_vert</mat-icon>
          </button>
          <mat-menu #menu="matMenu">
            <button mat-menu-item (click)="openDialog(element)">
              <mat-icon>assignment</mat-icon>
              <span>See More</span>
            </button>
            <div *ngIf="isShowDiv[element.id]">
              <button mat-menu-item routerLink="updatestatus/{{ element.id }}">
                <mat-icon>update</mat-icon>
                <span>Update Progress</span>
              </button>
            </div>
            <button mat-menu-item routerLink="trackticket/{{ element.id }}">
              <mat-icon>drafts</mat-icon>
              <span>Track Ticket</span>
            </button>
          </mat-menu>
        </td>
      </ng-container>

Typescript 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 < 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;
      }
    }
about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

You already have the reference to the element, why not skip the isShowDiv logic and replace <div *ngIf="isShowDiv[element.id]"> with <div *ngIf="element.status != 'closed'">

about 4 years ago · Juan Pablo Isaza Report

0

Or just use not-operator ! in the template. Might work. If you only want that one to disappear.

<div *ngIf="!isShowDiv[element.id]">
          <button mat-menu-item routerLink="updatestatus/{{ element.id 
      }}">
            <mat-icon>update</mat-icon>
            <span>Update Progress</span>
          </button>
        </div>
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!