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
– Günter Zöchbauer, Commented Oct 23, 2016 at 20:07

Günter Zöchbauer · Accepted Answer · 2016-11-24 18:52:03Z

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, 2016 at 18:52

answered Oct 23, 2016 at 20:05

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kai Over a year ago

Since the new Directive composition API was released, this answer is no longer true. angular.dev/guide/directives/directive-composition-api

Matt · Accepted Answer · 2019-10-29 14:57:25Z

3

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

answered Oct 29, 2019 at 14:57

Matt

2,32616 silver badges24 bronze badges

Collectives™ on Stack Overflow

Angular 2 - apply ngIf on host element using @HostBinding

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related