InterviewSolution
Saved Bookmarks
InterviewSolution
| 1. |
What are slides . Explain with example. |
|
Answer» Slides is a UI component. This component is used as a container for layouts such as photo galleries, tutorials, questionnaires etc. A slides component can have one or more slides. User can SWIPE or drag to move to next slide. Below is a brief example. Add the two functions to component.ts file and the HTML markup to view. genderUpdate(gender) { if(gender == "M" || gender == "F") { this.iGender = gender; this.slides.lockSwipes(false); // let currentSlide = this.slides.getActiveIndex() + 1; this.slides.slideNext(); this.slides.lockSwipes(TRUE); } } ageGroupSelected(event) a { if(event) { this.ageGroup = event; this.slides.lockSwipes(false); this.slides.slideNext(); this.slides.lockSwipes(true); } } <ion-slides> <ion-slide lockSwipeToNext="false"> <button ion-button color="danger"> Select Your Gender </button> <ion-card class="genderIcon" (click)="genderUpdate('M')" color="danger"> <ion-card-header> <ion-card-title> Male </ion-card-title> </ion-card-header> <ion-card-content> <ion-icon name="man"></ion-icon> </ion-card-content> </ion-card> <ion-card class="genderIcon" margin-top (click)="genderUpdate('F')" color="danger"> <ion-card-header> <ion-card-title> Female </ion-card-title> </ion-card-header> <ion-card-content> <ion-icon name="woman"></ion-icon> </ion-card-content> </ion-card> </ion-slide> <ion-slide lockSwipeToNext="false"> <ion-list radio-group [(ngModel)]="ageGroup" (ionChange)="ageGroupSelected($event)"> <ion-list-header class="headTitle" color="danger"> My Age Group is </ion-list-header> <ion-item> <ion-label color="primary"> 0 - 17 </ion-label> <ion-radio VALUE="child"></ion-radio> </ion-item> <ion-item> <ion-label color="primary"> 18 - 100 </ion-label> <ion-radio value="adult" ></ion-radio> </ion-item> </ion-list> </ion-slide> </ion-slides> |
|