CODEWITHSUNDEEP
angularangular-materialangular-material2
CoderX
CoderX

Reputation: 1022

How to include or exclude an attribute from the HTML in Angular 4

I am using angular 4 with angular materials to construct a table. I want the mat-sort-header to be added conditionally on the following template. 

<mat-header-cell *matHeaderCellDef mat-sort-header>Id</mat-header-cell>

I have tried the following code: 

<mat-header-cell *matHeaderCellDef [mat-sort-header]=" column!='id' ? column : false ">Id</mat-header-cell>

But it still adds the sorting header in the table for this column.

My overall table looks as follows, and is working fine, except for the sorting header issue: 

  <mat-table #table1 [dataSource]="records" matSort class="mat-cell">

    <ng-container *ngFor="let column of keys" [matColumnDef]="column">
      <mat-header-cell *matHeaderCellDef [mat-sort-header]=" column!='actions' ? column : false ">
        <p *ngIf=" column!='actions' ">{{ column }}</p>
        <button *ngIf=" column=='actions' " mat-icon-button color="primary" (click)="functionA()">
          <mat-icon class="indigo-icon" aria-label="Example icon-button with a heart icon">add</mat-icon>
        </button>

      </mat-header-cell>
      <mat-cell *matCellDef="let row; let i=index;">
        <p *ngIf=" column!='actions' ">{{ row[column] }}</p>
        <button *ngIf=" column=='actions' " mat-icon-button color="accent" (click)="functionA()">
          <mat-icon class="indigo-icon" aria-label="Edit">edit</mat-icon>
        </button>

        <button *ngIf=" column=='actions' " mat-icon-button color="accent" (click)="functionA()">
          <mat-icon class="indigo-icon" aria-label="Delete">delete</mat-icon>
        </button>

      </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="keys"></mat-header-row>
    <mat-row *matRowDef="let row; columns: keys;"></mat-row>
  </mat-table>

Upvotes: 17

Views: 12105

Answers (4)

Surya R Praveen
Surya R Praveen

Reputation: 3745

This might help you. Much simpler way of using Index within *ngFor

  <table
    matSort
    (matSortChange)="sortData($event)"
    class="media-report"
    style="width: 999px"
  >
    <ng-container *ngIf="generalAppSettings?.applicationVariables">
      <tr>
        <td colspan="5" class="results">
          <h4>{{ sortedData.length }} {{ data.showingResultsText }}</h4>
        </td>
      </tr>
    </ng-container>

    <tr *ngIf="sortedData.length != 0">
      <ng-container
        *ngFor="
          let generalTableHeader of tableHeaders?.insightTableVariables[0]
            ?.columnHeaders[0] | keyvalue : originalOrder;
          let i = index
        "
      >
        <th
          mat-sort-header="{{ generalTableHeader.key }}"
          disabled="{{ i == 4 }}"
        >
          {{ generalTableHeader.value }}
        </th>
      </ng-container>
    </tr>

Upvotes: 0

Karuna Singh
Karuna Singh

Reputation: 11

It works for me to disable mat sort for a specific columns !!

<ng-container *ngIf="tableData == 'deviceState' || tableData == 'firmwareVersion' || tableData == 'edge'; else noSort">
    <th scope="col" *matHeaderCellDef matSortDisabled> {{getHeader(tableData)}} </th>
</ng-container>
<ng-template #noSort>
    <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header> {{getHeader(tableData)}} </th>
</ng-template>

Upvotes: 1

Jake
Jake

Reputation: 171

CoderX's answer is the best approach for your question. but there might come a scenario where you need to render a separate template based on condition. In such a case you can do it like below:

<ng-container *ngIf="columnAction=='sort'; else noSort">
  <mat-header-cell *matHeaderCellDef mat-sort-header />          
</ng-container>

<ng-template #noSort>
  <mat-header-cell *matHeaderCellDef />         
</ng-template>

Upvotes: 11

CoderX
CoderX

Reputation: 1022

Well, I solved it as follow: 

<mat-header-cell *matHeaderCellDef [mat-sort-header]=" column!='actions' ? column : null " [disabled]=" column=='actions' ? true : false " >

Needed to bind the disabled property.

Upvotes: 25

Related Questions