CODEWITHSUNDEEP
angular
Richard Barraclough
Richard Barraclough

Reputation: 2984

Angular conditional template

Is this supposed to work?

The two p never appear in the browser window.

Console error messages suggest that the #content template is rendering before loading has finished.

If I hard-code the logic into the component that it's wrapping then it works, but of course I'd prefer not to have to copy all this in to every template.

<p>LOADING: {{ loader.isLoading }} </p>

<p *ngIf="loader.isLoading">LOADING+</p> 

<ng-container *ngIf="loader.isLoading; then loading else content">
</ng-container>

<ng-template #loading>
  <div class="loader">
    <div><span class="fas fa-circle-notch fa-spin fa-4x"></span></div>
    <ul>
      <li *ngFor="let m of loader.messages">{{m}}</li>
    </ul>
  </div>
</ng-template>

<ng-template #content>
  <ng-content></ng-content>
</ng-template>

Upvotes: 0

Views: 957

Answers (1)

Matthieu Riegler
Matthieu Riegler

Reputation: 55669

If you want to render templates with a condition in an ng-container you need to use :[ngTemplateOutlet].

<ng-container [ngTemplateOutlet]="loader.isLoading ? loading : content">
</ng-container>

The rest, staying the same.

<ng-template #loading>
  <div class="loader">
    <div><span class="fas fa-circle-notch fa-spin fa-4x"></span></div>
    <ul>
      <li *ngFor="let m of loader.messages">{{m}}</li>
    </ul>
  </div>
</ng-template>

<ng-template #content>
  <ng-content></ng-content>
</ng-template>

Upvotes: 1

Related Questions