CODEWITHSUNDEEP
htmlangularionic-framework
TheAnonymousModeIT
TheAnonymousModeIT

Reputation: 923

Render controls dynamically

I have a component that dynamically renders Ionic components:

<div *ngIf="property && property.type === 'data'">

  <div *ngIf="property.controlType === 'label'">
    <ion-label>{{data}}</ion-label>
  </div>

  <div *ngIf="property.controlType === 'date'">
    <ion-label>{{ toDate(data) }}</ion-label>
  </div>

</div>

The result is something like:

<div>
  <div>
     <ion-label>Hello World</ion-label>
  </div>
</div>

But I need just the ionic component, without the divs:

<ion-label>Hello World</ion-label>

How can I achieve this with lowest redundancy?

Edit: I don't want something like:

<ion-label *ngIf="property && property.type === 'data' && property.controlType === 'label'">{{data}}</ion-label>
<ion-label *ngIf="property && property.type === 'data' && property.controlType === 'date'">{{data}}</ion-label>
...

Upvotes: 0

Views: 48

Answers (1)

Felix Lemke
Felix Lemke

Reputation: 6488

You can use the *ngIf directly on the ion-label

<ion-label *ngIf="property?.type === 'metaData' && property?.controlType === 'date'">{{ toDate(data) }}</ion-label>

EDIT:

Otherwise you can create these checks inside the component class and apply these values to boolean properties like isDate or isLabel.

Then you can do

 <ion-label *ngIf="isDate">{{ toDate(data) }}<ion-label>
 <ion-label *ngIf="isLabel">{{ toDate(data) }}<ion-label>

Otherwise you can use ng-container which does not add extra-levels of html in the build files, like the div does. In combination with switchCase you would end up like:

<ng-container *ngIf="properties?.type === 'metaData'>
  <ng-container [ngSwitch]="properties?.controlType">
    <ion-label *ngSwitchCase="date">...</ion-label>
    <ion-label *ngSwitchCase="lavel">...</ion-label>
  </ng-container>
</ng-container>

Upvotes: 1

Related Questions