0

When I just simply make a table I did not repeat but added date: "d/M/yyyy" but when I repeat, how do I check that put the pipe line to get the date format?

when not repeating

<ng-container matColumnDef="deliveryDate">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>
            Delivery Date
    </th>
    <td mat-cell *matCellDef="let element">
            {{ element.deliveryDate | date: "d/M/yyyy" }}
    </td>
</ng-container>

when repeating


<ng-container
    *ngFor="let column of columns; let i = index"
    [matColumnDef]="column.field"
>
    <mat-header-cell
        class="columnHighLight"
        *matHeaderCellDef
        cdkDropList
        cdkDropListLockAxis="x"
        cdkDropListOrientation="horizontal"
        (cdkDropListDropped)="
            dropListDropped($event, i)
        "
        cdkDrag
        (cdkDragStarted)="dragStarted($event, i)"
        [cdkDragData]="{
            name: column.field,
            columIndex: i
        }"
        mat-sort-header
    >
        {{ column.alias }}

        <!-- {{ column.field }} -->
    </mat-header-cell>
    <mat-cell *matCellDef="let row">
        {{ row[column.field] }}
    </mat-cell>
</ng-container>
dumb11
  • 129
  • 1
  • 9

1 Answers1

0

Often a situation may present where it might be necessary to use more than one structural directives on one particular html tag. In scenarios such as those we may use wrap-around tags like <div> or <ng-container>. But the beauty of <ng-container> is that it doesn't appear on the DOM.

Link to better explanation (blog)

Solution 1 :

<ng-container *ngIf="column.field === 'deliveryDate'; else nonDate">
        <mat-cell *matCellDef="let row">
            {{ row[column.field] }}
        </mat-cell>
</ng-container>
<ng-template #nonDate>
        <mat-cell *matCellDef="let row"> {{ row[column.field] | date: "d/M/yyyy" }} </mat-cell>
</ng-template>
Jayabrata
  • 66
  • 3
  • thank you for your answer. But I just used a method like in the interpolation I put method such as {{ getValue(colum.field, row[column.field}} – dumb11 Jul 05 '20 at 19:48
  • You may want to read through this article once https://medium.com/showpad-engineering/why-you-should-never-use-function-calls-in-angular-template-expressions-e1a50f9c0496 – Jayabrata Jul 07 '20 at 13:11