In my code, I have a screen which I use for different elements. In this screen, I have a table. I want to change one of the columns' header according to the SourceType. When I try that like I've written below, it gives an error. What should I do, use to achieve what I want?
HTML:
<ng-container matColumnDef="DeliveryNumber">
<th mat-header-cell *matHeaderCellDef *ngIf="_stockEntry.SourceType != 49"> Tesellüm No </th>
<th mat-header-cell *matHeaderCellDef *ngIf="_stockEntry.SourceType == 49"> Parti No </th>
<td mat-cell *matCellDef="let row; let i = index">
<span *ngIf="EditIndex != i">{{row.DeliveryNumber}}</span>
<mat-form-field floatLabel="never" *ngIf="EditIndex == i" class="w-100-p">
<mat-select [(ngModel)]="row.DeliveryNumber" required name="DeliveryNumber">
<mat-option *ngFor="let prm of deliveryList" [value]="prm.DeliveryNumber">
{{prm.DeliveryNumber}}
</mat-option>
</mat-select>
</mat-form-field>
</td>
</ng-container>
You can't have multiple structural directives (*ngIf & *matHeaderCellDef ) on one element. So what you can do is having ngIf on a ng-container :
<ng-container matColumnDef="DeliveryNumber">
<th mat-header-cell *matHeaderCellDef >
<ng-container *ngIf="_stockEntry.SourceType !== 49">Tesellüm No </ng-container>
<ng-container *ngIf="_stockEntry.SourceType == 49">Parti No </ng-container>
</th>
<td mat-cell *matCellDef="let row; let i = index">
<span *ngIf="EditIndex != i">{{row.DeliveryNumber}}</span>
<mat-form-field floatLabel="never" *ngIf="EditIndex == i" class="w-100-p">
<mat-select [(ngModel)]="row.DeliveryNumber" required name="DeliveryNumber">
<mat-option *ngFor="let prm of deliveryList" [value]="prm.DeliveryNumber">
{{prm.DeliveryNumber}}
</mat-option>
</mat-select>
</mat-form-field>
</td>
</ng-container>