Using conditional icons in customizable Angular data table

Question

I'd like to use content projection to "project" custom icons in an Angular data table I've made. I've attempted to make these icons conditional based on the data in a certain column. I am able to insert an icon into each column and row, but I am unable to figure out how to make these conditional.

table.component.html

<table>
    <thead>
        <tr>
            <th *ngFor="let col of cols" 
            (click)="selectColHeader(col.prop); 
            col.enableSort && sort(col.prop)">
                {{col.header}}
                <input type="text"
                class="ds-c-field"
                [(ngModel)]=fields[col.prop] 
                (click)="selectColInput(col.prop, $event)"
                *ngIf=col.enableFilter/>
                <img 
                class="arrow"
                *ngIf="col.enableSort && col.prop === selectedColHeader"
                [src]="direction === 'asc' ? upArrowPath : downArrowPath"/>
            </th>
        </tr>
    </thead>
    <tbody *ngFor="let row of data">
        <tr>
            <td *ngFor="let col of cols">
                    <ng-container 
                    *ngTemplateOutlet="cellTemplate;
                     context: row[col.prop]">
                    </ng-container>
                {{row[col.prop]}}
            </td>
        </tr>
    </tbody>
</table>

app.component.html

<app-data-table
[data]="data" 
[cols]="cols" 
[cellTemplate]="cellTemplate">
    <ng-template #cellTemplate let-value>
        <img class="rimg1" 
        [src]="com" 
        alt="Complete"
        *ngIf="value === 'Completed'/>
    </ng-template>
</app-data-table>

table.component.ts

export class tableComponent {

  @Input() cellTemplate: TemplateRef<any>;
}

kaluginserg · Accepted Answer · 2018-02-06 14:07:41Z

1

In table.component.html try change rows <ng-container ..... ></ng-container> to:

<ng-container 
   *ngTemplateOutlet="cellTemplate;
      context: {prop1: row[col.prop] }"> // <-- changes here
</ng-container>

And in app.component.html change row
<ng-template #cellTemplate let-value>
to :
<ng-template #cellTemplate let-value="prop1">

After the changes, it should work.

edited Feb 6, 2018 at 14:07

answered Feb 5, 2018 at 20:39

kaluginserg

3541 gold badge4 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

FakeEmpire Over a year ago

The only solid answer I could find. Thank you!

Collectives™ on Stack Overflow

Using conditional icons in customizable Angular data table

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related