CODEWITHSUNDEEP
angular
Reza
Reza

Reputation: 19843

How to declare a variable for only using in template in Angular2

I have below code

  <ion-card >
    <ion-card-content>
      <ion-chip *ngFor="let skill of contact.skills | split">
        <ion-label>{{skill}}</ion-label>
      </ion-chip>
    </ion-card-content>
  </ion-card>

then I want to hide the card if there is no skills, so I changed it to

  <ion-card [hidden]="(contact.skills | split).length == 0">
    <ion-card-content>
      <ion-chip *ngFor="let skill of contact.skills | split">
        <ion-label>{{skill}}</ion-label>
      </ion-chip>
    </ion-card-content>
  </ion-card>

and it's working fine, but the problem is value is going to split pipe twice, then how can I define a variable and using pipe once?

I tried below but not working 

  <ion-card #skills="contact.skills | split" [hidden]="skills.length == 0">
    <ion-card-content>
      <ion-chip *ngFor="let skill of skills">
        <ion-label>{{skill}}</ion-label>
      </ion-chip>
    </ion-card-content>
  </ion-card>

Upvotes: 1

Views: 1111

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657308

You can't use template variables to assign custom values.

Template variables can only be used to refer to elements and components directly or by name (exportAs) or to assign values from a structural directives context like let idx=index in *ngFor

For your use case create a field in the components class instead and bind to this class.

Upvotes: 1

Related Questions