put an attribute on an html tag using an * ngFor
Clash Royale CLAN TAG#URR8PPP
put an attribute on an html tag using an * ngFor
I'm doing an app using IONIC, but it's based on angular. I simply want that if one element is the last one:
(item==myArray.length?'navPop':'')
add the navPop attribute, otherwise do not add it. (in IONIC, navPop attribute is, when you click, it returns to a preview that is what I need).
I'm doing this, but I get errors:
this.myArray=[1,2,3,4];
<ion-slide *ngFor="let item of myArray" text-center item==myArray.length?'navPop':''>
I hope this result (if is my last element):
<ion-slide text-center></ion-slide>
<ion-slide text-center></ion-slide>
<ion-slide text-center></ion-slide>
//last element with navPop
<ion-slide text-center navPop></ion-slide>
how can I fix it, thanks?
3 Answers
3
You can use the attr
binding, like so:
attr
<ion-slide *ngFor="let item of myArray" text-center [attr.navPop]="item==myArray.length ? '': null" >
You could also modify this to use the last
property, as suggested by others
last
Use last
<ion-slide *ngFor="let item of myArray;let _last=last" text-center [attr.navPop]="_last" >
https://angular.io/api/common/NgForOf
index: number: The index of the current item in the iterable.
first: boolean: True when the item is the first item in the iterable.
last: boolean: True when the item is the last item in the iterable.
even: boolean: True when the item has an even index in the iterable.
odd: boolean: True when the item has an odd index in the iterable.
index: number: The index of the current item in the iterable.
first: boolean: True when the item is the first item in the iterable.
last: boolean: True when the item is the last item in the iterable.
even: boolean: True when the item has an even index in the iterable.
odd: boolean: True when the item has an odd index in the iterable.
You can do following. Angular provides a variable called last
within ngFor
.
last
ngFor
<ng-container *ngFor="let item of myArray; let isLast = last">
<ng-container *ngIf="!isLast">
<ion-slide text-center></ion-slide>
</ng-container>
<ng-container *ngIf="isLast">
<ion-slide text-center navPop></ion-slide>
</ng-container>
</ng-container>
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.