Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

266
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda