angularbadgeng-templateignite-uiigx-grid

Is there a way of adding Badge to the column header of an Ignite grid?


I have an ignite grid with 5 columns. One of the columns displays if a customer is authorized to order something or not. Basically it's one of three strings:

  1. Pending approval
  2. Approved
  3. Unauthorized.

What I want to do is keep track of the number of approvals that are pending. For that I want to add a badge component with the column header that shows the number of approvals that are pending. Is it possible to do that?

I have looked around for a bit but can't find an appropriate solution. Ignite UI for Angular library does have a badge component but could not find a way to use it with the data grid

Screenshot of the igx grid


Solution

  • Yes, there are two ways to set a header template, thotugh the input - API documentation of headerTemplate.. Or by using the igxHeader directive

    Code snippet - input:

    <igx-column field="ID" [headerTemplate]="pinTemplate"></igx-column>
    
    ...
    
    <ng-template let-column #pinTemplate>
        <span style="float:left">{{column.header || column.field}}</span>
        <igx-badge type="success" icon="chat_bubble"></igx-badge>
        <igx-icon fontSet="material"(click)="pinColumn(column)">lock</igx-icon>
    </ng-template>
    

    Code snippet - Directive:

    <igx-column field="Missing">
          <ng-template igxHeader let-column>
             {{ column.field }} {{ column.visibleIndex }}
          </ng-template>
    </igx-column>