CODEWITHSUNDEEP
cssangulartypescriptsassionic3
Sampath
Sampath

Reputation: 65958

ItemSliding is not working with button

Can you tell me why I cannot see Me button? I have used ItemSliding

Here is the stackblitz. Please see the home folder.

I wanted to create below kind of list:

UI

enter image description here

.html

<ion-list>
        <ion-item-sliding #item>
            <ion-item>
                <button ion-button class="buttoncls">Me</button>
                <ion-label fixed>Members</ion-label>
            </ion-item>
            <ion-item-options side="right">
                <button ion-button (click)="deleteMember(item)" color="danger">
            <ion-icon name="ios-trash-outline"></ion-icon>
            </button>
            </ion-item-options>
        </ion-item-sliding>
    </ion-list>

Upvotes: 0

Views: 54

Answers (1)

yurzui
yurzui

Reputation: 214275

That's because ion-item component has predefined set of selectors that can be used to transclude inside that component. Git repo

 '<ng-content select="[item-start],[item-left],ion-checkbox:not([item-end]):not([item-right])"></ng-content>' +
    '<div class="item-inner">' +
      '<div class="input-wrapper">' +
        '<ng-content select="ion-label"></ng-content>' +
        '<ion-label *ngIf="_viewLabel">' +
          '<ng-content></ng-content>' +
        '</ion-label>' +
        '<ng-content select="ion-select,ion-input,ion-textarea,ion-datetime,ion-range,[item-content]"></ng-content>' +
      '</div>' +
      '<ng-content select="[item-end],[item-right],ion-radio,ion-toggle"></ng-content>' +
      '<ion-reorder *ngIf="_hasReorder"></ion-reorder>' +
    '</div>' +
'<div class="button-effect"></div>',

So just add for example item-start attribute like

<button ion-button item-start class="buttoncls">Me</button>

and look at Forked Stackblitz

item-right will look like Example

Upvotes: 3

Related Questions