• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

169
Vistas
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;
      }
    }
almost 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

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'">

almost 3 years ago · Juan Pablo Isaza Denunciar

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>
almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda