ionic three display one div at a time - ionic-framework

Question

have divided my form into divs on one ionic html page want to display one at a time, navigate until submit any help, my form is somehow like this, the first should display by default but the other divs should be displayed on clicking next
<div id="formPart1">
<ion-row>
<label>select date</label>
<ion-input type="date" ng-model="date"></ion-input>
<button ion-button full ng-click="showNext()">Next</button>
</ion-row>
</div>
<div id="formPart2">
<ion-row>
<label>select date</label>
<ion-input type="name" ng-model="name"></ion-input>
</ion-row>
</div>

Answer 1

In this case, i suggest you to use ion-slides. Distribute form elements to the slides. and lock swipe on page load and only change to next slide on Next button click.
Do this to lock swiping
ionViewDidLoad() {
console.log('ionViewDidLoad ServicePage');
this.slides.lockSwipes(true);
}
and on Next button click
goToSlide(slideNo) {
this.slides.lockSwipes(false);
this.slides.slideTo(slideNo, 500);
this.slides.lockSwipes(true);
}

Answer 2

So, First of all you have to write the code like this
<div id="formPart1">
<ion-row>
<ion-label>select date</label>
<ion-input type="date" [(ngModel)]="date"></ion-input>
<button ion-button full (click)="showNext()">Next</button>
</ion-row>
</div>
<div id="formPart2" [hidden]="!YOUR_VARIABLE">
<ion-row>
<ion-label>select date</label>
<ion-input type="name" [(ngModel)]="name"></ion-input>
</ion-row>
</div>
in the show showNext() method you have to make the variable true, like this
showNext() {
this.YOUR_GLOBAL_VARIABLE = true
}
Hope this will help you !!!