Angular 2 - apply ngIf on host element using @HostBinding

Question

I'm trying to set ngIf on the host element using @HostBinding decorator.

class ListItem {
    @HostBinding('ngIf') active: boolean = false;
}

And I'm getting the error: Can't bind to 'ngIf' since it isn't a known property of 'list-item'.

However I see an answer here which seems to be suggesting this usage.

I didn't think of this use case when I answered the question :D, but that's won't work for the `ngIf` directive (see my answer). — Günter Zöchbauer, Oct 23 '16 at 20:07

Günter Zöchbauer · Accepted Answer · 2016-11-24T18:52:03.970

14

ngIf is a directive and directives can't be added dynamically. They are only applied if markup added statically to a components template matches the selector.

@HostBinding() only supports class., attr., and style. bindings.

edited Nov 24 '16 at 18:52

answered Oct 23 '16 at 20:05

Günter Zöchbauer

623,577
216
2,003
1,567

score 1 · Answer 2 · answered Oct 29 '19 at 14:57

1

just wrap youur template in <ng-container *ngIf="active"></ng-container> instead of using host binding

answered Oct 29 '19 at 14:57

Matt

2,096
14
20

Angular 2 - apply ngIf on host element using @HostBinding

2 Answers2