put ngif in Angualr Material

Question

I'm building a web app using Angular + Typescript. And I have ASP.NET Core Web API, I have two components one is employee and another is department,I want to run condition in 'departement',for example if i select departement IT i got all employees in this department,the problem i get just the employee in select department not all employee and i can't use *ngif and *matcelldef in same statement HTML

<mat-card>
<mat-card-header class="w-100">
    <mat-card-title-group class="w-100">
        <mat-form-field appearance="fill">
            <mat-label>{{'::Departement' | abpLocalization}}</mat-label>
            <mat-select id="author-id" Name="departementId" [(value)]="selected" autofocus>
                <mat-option [value]="departement.id" *ngFor="let departement of departements$ | async">{{ departement.name }}</mat-option>
            </mat-select>
        </mat-form-field>
    </mat-card-title-group>
</mat-card-header>
<mat-card-content>
    <table mat-table [dataSource]="employee.items" class="w-100" matSort (matSortChange)="changeSort($event)">
        <tr mat-header-row *matHeaderRowDef="columns"></tr>
        <tr mat-row *matRowDef="let myRowData; columns: columns"></tr>

        <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
                {{'::Name' | abpLocalization}}
            </th>
            <li *ngFor="let employee of employee.items ">
                {{employee.name}}
            </li>
  <td mat-cell *matCellDef="let element"><div *ngIf="element.departementId === selected ">{{element?.name}}</div></td> 
        </ng-container>
    </table>
    <mat-paginator [length]="employee.totalCount" [pageSize]="list.maxResultCount" (page)="changePage($event)"></mat-paginator>
</mat-card-content>

Can you add to your question: can you build the app, do you get errors in the browser console? Not working correctly can be many things. Optionally add a StackBlitz. — Pieterjan, Jan 13 '21 at 20:47
I think you looing for this: https://stackoverflow.com/a/48540498/4799922. Its costum filter for mat-tabel — PanterP, Jan 14 '21 at 11:56

score 0 · Answer 1 · answered Feb 17 '21 at 13:56

<li *ngFor="let employee of employee.items "> you are using the same name employee for the different properties I think this is the problem just change it to <li *ngFor="let item of employee.items ">.

And one more thing, if you want to add *ngIf="" to an element where you are using another structural directive, you can round this element with <ng-container><ng-container> and add the *ngIf="" directive to it.

<ng-container *ngIf="write_your_condition">
   <td mat-cell *matCellDef="let element">
      <div *ngIf="element.departementId === selected ">{{element?.name}}</div>
   </td>
</ng-container>

score 0 · Answer 2 · answered Aug 18 '22 at 08:57

0

In angular, we can not use structural directive in the same element so it's better to wrap condition in ng-container.

answered Aug 18 '22 at 08:57

Karan Chokshi

89
8

put ngif in Angualr Material

2 Answers2