ngIf=false with ngContent still loads template bindings

Question

Defining a simple component as follows:

@Component({
  selector: 'loader',
  template: `<div *ngIf='false'>
        <ng-content></ng-content>
        </div>`,
})
export class Loader {}

When using it like this:

  <loader>
      {{model.something}}
  </loader>

I still get template binding errors if model is undefined in the parent, as it tries to resolve the bindings even with the ngIf=false. Why is this the case?

Pankaj Parkar · Accepted Answer · 2016-07-07T13:35:27.537

1

Because inner content of loader component which is going to projected inside ngContent element, is get compiled once with the current component context (this), even if component template isn't injected to DOM.

It works the same way as ng-transclude work in Angular 1.X

You should use Elvis Operator here to avoid such issue

<loader>
    {{model?.something}}
</loader>

edited Jul 07 '16 at 13:35

answered Jul 07 '16 at 12:52

Pankaj Parkar

134,766
23
234
299

And you can still query it with `@ContentChild()` even when it is not transcluded to a `` element. It is just not added to the DOM. – Günter Zöchbauer Jul 07 '16 at 13:09

ngIf=false with ngContent still loads template bindings

1 Answers1