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

Question

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>

Günter Zöchbauer · Accepted Answer · 2016-12-12 07:16:21Z

1

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.

answered Dec 12, 2016 at 7:16

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related