Using *ngIf on a directive

Question

I have a mat-icon and a mat-badge on it containing a number.

I'm looking for removing the mat-badge only if the number is <=0.

I did *ngIf on the entire mat-icon, the result its obvious, it remove both mat-icon and mat-badge.

Here is the code

<mat-icon matBadge="{{matBadge}}" class="icon">shopping_cart</mat-icon>

score 6 · Answer 1 · answered Jul 22 '18 at 11:47

6

You can use matBadgeHidden input property of matBadge directive

<mat-icon matBadge="{{matBadge}}" class="icon" [matBadgeHidden]="number<=0">shopping_cart</mat-icon>

answered Jul 22 '18 at 11:47

displayName

986
16
40

[matBadgeHidden]="!matBadge" – Sergi Jul 22 '18 at 12:35

score 2 · Answer 2 · answered Jul 22 '18 at 11:55

2

@displayName answer is so clean, you should go with that but you can also use *ngIf with else incase it ever comes handy.

<mat-icon matBadge="{{matBadge}}" class="icon" *ngIf="matBadge > 0; else matBadgeHidden">shopping_cart</mat-icon>

<ng-template #matBadgeHidden>
<mat-icon class="icon">shopping_cart</mat-icon>
</ng-template>

answered Jul 22 '18 at 11:55

Abdul-Razak Adam

1,070
11
19

its working but does ng-template have some default styles such margin, padding? seems like it have own styles – Sergi Jul 22 '18 at 12:26

Using *ngIf on a directive

2 Answers2