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?

Answer 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>