Ion-item detail-push / detail-none attribute binding


#1
 <ion-item [showArrow(item)]>
</ion-item>

The function showArrow will return detail-push or detail-none depending where the item contains detail view.


#2

And what is your question or problem?


#3

Need to bind dynamically detail-push/detail-none

<ion-item *ngFor ="let item of Items" detail-push/detail-none >
</ion-item>

Some ion-item will contain detail-push and reaming detail-none. These values need to be populated from function. But not sure how to achieve this.


#4

try this: How to binding a attribute


#5

Solved the issue by using ion-icons <ion-icon right float-right *ngIf="showArrow(item)" name="arrow-forward"></ion-icon>.

Thanks everyone for your help…


#6

[attr.detail-push]="editing ? 'true': null"
where editing is a boolean attribute


#7

Your solution is a bit ugly, because you are adding the icon yourself (and it doesn’t look as nice as the default detail arrows).

A nicer way would be:

<ion-list>
    <button [attr.detail-none]="showArrow(item) ? null : ''" *ngFor="let item of items" ion-item (click)="stuffThatHappensWhenClicked(item)">
      <ion-avatar item-start>
        <img src="{{item.avatar}}"/>
      </ion-avatar>
      <h2>{{item.name}}</h2>
    </button>
  </ion-list>

Now, when your showArrow() method returns true, detail-none is not shown, but when it’s false, it is added to button.