4

The following code is already a bit of an atrocity in terms of nested ng-this and ng-that tags, but it would be so much prettier if there were a way to skip the ngSwitch for an ngIf and just pass a context to the else branch like

prop;context:{property: property}"

, as demonstrated in the *ngTemplateOutlet also invoked in the template. I hope I have done my due diligence looking for ways to do it, but so far no option has presented itself to me other than using (another!) nested *ngTemplateOutlet. Markup is a bit trimmed to the necessary stuff.

<ng-template #prop let-property="property"> 
  <node-widget
    [property]="property.Nodes[1]"
  >
  </node-widget>
</ng-template>

<ng-container *ngFor="let property of lefties(Properties); let index = index">
  <ng-container [ngSwitch]="index">
    <node-widget *ngSwitchCase="0"
      [property]="property.Nodes[1]"
    >
    </node-widget>
    <ng-container *ngSwitchDefault>
      <ng-container *ngTemplateOutlet="prop;context:{property: property}">
      </ng-container>
    </ng-container>
  </ng-container>
</ng-container>

The ng-template is recycled elsewhere on the template, so I cannot put it nearer the ngSwitch (essentially inside the *ngFor). I tried replacing the whole ngSwitch thing with an *ngIf, but then the prop template complained it didn't have the [property] defined. Suggestions? Am I missing something?

yogibimbi
  • 588
  • 5
  • 17

0 Answers0