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>