Categorias
iiiiii
item-sliding eventos
Descripcion
Como manejar el sliging eventos
Nota
<app-header titulo="lista"></app-header>
<ion-content>
<ion-list>
<ion-list-header>
<ion-label>
<h1>deslizar izquierda o derecha</h1>
</ion-label>
</ion-list-header>
<ion-item-sliding *ngFor="let usuario of usuarios | async">
<ion-item >
<ion-label >
<h3>{{usuario.name}}</h3>
<p>{{usuario.email}}</p>
</ion-label>
<ion-label slot="end">
{{usuario.phone}}
</ion-label>
</ion-item>
<ion-item-options side="start">
<ion-item-option (click)="favorite(usuario)">Favorite</ion-item-option>
<ion-item-option (click)="dalete(usuario)" color="danger">Delete</ion-item-option>
</ion-item-options>
<ion-item-options side="end">
<ion-item-option color="success">Archive</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</ion-content>
html
import { Component, OnInit, ViewChild } from '@angular/core';
import { IonList } from '@ionic/angular';
import { Observable } from 'rxjs';
import {DataService} from 'src/app/services/data.service';
@Component({
selector: 'app-list',
templateUrl: './list.page.html',
styleUrls: ['./list.page.scss'],
})
export class ListPage implements OnInit {
/**Este metodo se usa para referenciar un elemento de ionic del html**/
usuarios : any;
@ViewChild(IonList) myIonlist:any;
constructor(private servUsuarios:DataService) {
}
ngOnInit() {
this.usuarios = this.servUsuarios.getUsuarios();
}
favorite(user:any){
console.log("favorite ");
this.myIonlist.closeSlidingItems(); //Con esta liena se cierra el ion item sliding
console.log(user);
}
dalete(user:any){
console.log("dalete ");
this.myIonlist.closeSlidingItems();////Con esta liena se cierra el ion item sliding
console.log(user);
}
}