Create wizard using tab in Angular Tab component
28 Sep 202324 minutes to read
Tab items can be disabled dynamically by passing the index and boolean value with the enableTab method and also passing index or HTML element to select an item from the tab using select method.
Create the following contents for each tab in the wizard.
-
Search tab:
Created with DropDownList to select the source, destination and type of ticket. A DatePicker for choosing the date of journey. -
Train tab:
Based on the selected start and end point, populated Grid with random list of available seats and train list. Initially define the columns and row selected event for validating, after the source and destination chosen update the dataSource for the Grid. -
Passenger tab:
A table with Textbox, Numeric, DropDownList for adding passenger name, age, gender and preferred berth/seat. Add validation on entering passenger details to proceed. -
Payment tab:
Calculate the ticket cost based on location, passenger count and ticket type. Generate data for Grid with passenger details, train number and ticket cost summary.
You can go back on each tab using buttons available in it and tabs are disabled to navigate through tab header click actions. Once you end the wizard all the data get cleared and wizard goes back to starting tab.
In the below demo, designed for simple train reservation module that enable/disable tab items based on sequential validation of each Tab content.
<ejs-tab #tab id="tab_wizard" heightAdjustMode="None" height=390 showCloseButton=false (selected)="tabSelected($event)">
<e-tabitems>
<e-tabitem [header]='headerText[0]'>
<ng-template #content>
<div id='booking'>
<div class="wizard-title">Plan your journey</div>
<div class="responsive-align">
<div class='row'>
<div class="col-xs-6 col-sm-6 col-lg-6 col-md-6 search-item">
<ejs-dropdownlist #startPoint width="100%" [dataSource]='cities'
[fields]='autoCompleteFields' floatLabelType='Auto' placeholder='From'>
</ejs-dropdownlist>
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 col-md-6 search-item">
<ejs-dropdownlist #endPoint width="100%" [dataSource]='cities'
[fields]='autoCompleteFields' floatLabelType='Auto' placeholder='To'>
</ejs-dropdownlist>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6 col-md-6 search-item">
<ejs-datepicker #date width='100%' placeholder='Journey Date' floatLabelType='Auto'
[min]='dateMin' [max]='dateMax' [value]='date'></ejs-datepicker>
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 col-md-6 search-item">
<ejs-dropdownlist #quota [dataSource]='quotas' placeholder='Ticket type'
floatLabelType='Auto' [fields]='fields'></ejs-dropdownlist>
</div>
</div>
<div class="btn-container">
<button id='searchNext' class='e-btn' (click)='btnClicked($event)'>Search Train</button>
</div>
<span id="err1"></span>
</div>
</div>
</ng-template>
</e-tabitem>
<e-tabitem [header]='headerText[1]' disabled=true>
<ng-template #content>
<div id='selectTrain'>
<div class="wizard-title">Select the train from the list </div>
<ejs-grid #availableTrain width="100%" (created)="availableTrainGridcreated()" (rowSelected)='trainSelected($event)'>
<e-columns>
<e-column field='TrainNo' headerText='Train No' width=120 type='number'></e-column>
<e-column field='Name' headerText='Name' width=140></e-column>
<e-column field='Departure' headerText='Departure' width=120></e-column>
<e-column field='Arrival' headerText='Arrival' width=140></e-column>
<e-column field='Availability' headerText='Availability' width=140 type='number'></e-column>
</e-columns>
</ejs-grid>
<br />
<div class="btn-container">
<button id="goToSearch" class='e-btn' (click)='btnClicked($event)'>Back</button>
<button id="bookTickets" class='e-btn' (click)='btnClicked($event)'>Continue</button>
</div>
<span id="err2"></span>
</div>
</ng-template>
</e-tabitem>
<e-tabitem [header]='headerText[2]' disabled=true>
<ng-template #content>
<div id='details'>
<div class="details-page wizard-title">Enter the passenger details</div>
<div id="PassengersList">
<table id="passenger-table">
<colgroup>
<col>
<col>
<col>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th class="name-header">Name</th>
<th class="age-header">Age</th>
<th class="gender-header">Gender</th>
<th class="type-header">Berth Preference</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input #pass_name1 class="e-input" type="text" placeholder="Passenger Name">
</td>
<td>
<ejs-numerictextbox #pass_age1 showSpinButton=false min=1 max=100 value=18
format=n0></ejs-numerictextbox>
</td>
<td>
<ejs-dropdownlist #pass_gender1 [dataSource]='gender' text="Male"
[fields]='fields'></ejs-dropdownlist>
</td>
<td>
<ejs-dropdownlist #pass_berth1 [dataSource]='berths' placeholder="Optional"
[fields]='fields'></ejs-dropdownlist>
</td>
</tr>
<tr>
<td>
<input #pass_name2 class="e-input" type="text" placeholder="Passenger Name">
</td>
<td>
<ejs-numerictextbox showSpinButton=false min=1 max=100 value=18 format=n0>
</ejs-numerictextbox>
</td>
<td>
<ejs-dropdownlist #pass_gender2 [dataSource]='gender' text="Male"
[fields]='fields'></ejs-dropdownlist>
</td>
<td>
<ejs-dropdownlist #pass_berth2 [dataSource]='berths' placeholder="Optional"
[fields]='fields'></ejs-dropdownlist>
</td>
</tr>
<tr>
<td>
<input #pass_name3 class="e-input" type="text" placeholder="Passenger Name">
</td>
<td>
<ejs-numerictextbox showSpinButton=false min=1 max=100 value=18 format=n0>
</ejs-numerictextbox>
</td>
<td>
<ejs-dropdownlist #pass_gender3 [dataSource]='gender' text="Male"
[fields]='fields'></ejs-dropdownlist>
</td>
<td>
<ejs-dropdownlist #pass_berth3 [dataSource]='berths' placeholder="Optional"
[fields]='fields'></ejs-dropdownlist>
</td>
</tr>
</tbody>
</table>
</div>
<br />
<div class="btn-container">
<button id="goBackToBook" class='e-btn' (click)='btnClicked($event)'>Back</button>
<button id="confirmTickets" class='e-btn' (click)='btnClicked($event)'>Continue</button>
</div>
<span id="err3"></span>
</div>
</ng-template>
</e-tabitem>
<e-tabitem [header]='headerText[3]' disabled=true>
<ng-template #content>
<div id='confirm'>
<div class="tab-title1 wizard-title">Confirm the details and proceed</div>
<ejs-grid #ticketDetailGrid width="100%" (created)="ticketDetailGridcreated()">
<e-columns>
<e-column field='TrainNo' headerText='Train No' width=120 type='number'></e-column>
<e-column field='PassName' headerText='Name' width=140></e-column>
<e-column field='Gender' headerText='Gender' width=120></e-column>
<e-column field='Berth' headerText='Berth' width=140></e-column>
</e-columns>
</ejs-grid>
<br />
<div id="amount" #amount></div>
<br />
<div class="btn-container">
<button id="goBackDetails" class='e-btn' (click)='btnClicked($event)'>Back</button>
<button id="makePayment" class='e-btn' (click)='btnClicked($event)'>Pay</button>
</div>
</div>
</ng-template>
</e-tabitem>
</e-tabitems>
</ejs-tab>
<div>
<ejs-dialog #alertDialog header='Success' width=250 isModal=true showCloseIcon=true
content='Your payment successfully processed' [target]='dlgTarget' [buttons]='dlgButtons'
(created)='dlgCreated()' [visible]=false></ejs-dialog>
</div>import { Component, ViewChild, OnInit, ViewEncapsulation, ElementRef } from '@angular/core';
import { DialogComponent } from '@syncfusion/ej2-angular-popups';
import { TabComponent, SelectEventArgs } from '@syncfusion/ej2-angular-navigations';
import { DatePickerComponent } from '@syncfusion/ej2-angular-calendars';
import { NumericTextBoxComponent } from '@syncfusion/ej2-angular-inputs';
import { GridComponent, RowSelectEventArgs } from '@syncfusion/ej2-angular-grids';
import { isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';
/**
* Create wizard using Tab
*/
// tslint:disable:max-line-length
@Component({
selector: 'app-container',
templateUrl: './app.component.html',
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
@ViewChild('tab') tab?: TabComponent;
@ViewChild('pass_name1') input1?: ElementRef;
@ViewChild('pass_name2') input2?: ElementRef;
@ViewChild('pass_name3') input3?: ElementRef;
@ViewChild('alertDialog') alertDlg?: DialogComponent;
@ViewChild('date') journeyDate?: DatePickerComponent;
@ViewChild('quota') ticketType?: DropDownListComponent;
@ViewChild('endPoint') endPoint?: DropDownListComponent;
@ViewChild('startPoint') startPoint?: DropDownListComponent;
@ViewChild('availableTrain') availTrainGrid?: GridComponent;
@ViewChild('pass_age1') passage1?: NumericTextBoxComponent;
@ViewChild('ticketDetailGrid') ticketDetailGrid?: GridComponent;
@ViewChild('pass_gender1') passgender1?: DropDownListComponent;
@ViewChild('pass_gender2') passgender2?: DropDownListComponent;
@ViewChild('pass_gender3') passgender3?: DropDownListComponent;
@ViewChild('pass_berth1') passBerth1?: DropDownListComponent;
@ViewChild('pass_berth2') passBerth2?: DropDownListComponent;
@ViewChild('pass_berth3') passBerth3?: DropDownListComponent;
public fields: Object = {};
public quotas: Object[] = [];
public gender: Object[] = [];
public berths: Object[] = [];
public today: Date = new Date();
public cities?: any;
public locations?: any;
public headerText: Object[] = [];
public dlgButtons: Object[] = [];
public selectedTrain?: any;
public autoCompleteFields: Object = {};
public dlgTarget: HTMLElement = document.querySelector('#container') as HTMLElement;
public dateMin?: Date;
public dateMax?: Date;
public result: Object[] = [];
public reserved: Object[] = [];
public err1: string = '';
public err2: string = '';
public err3: string = '';
public displayAmt: string = '';
public ngOnInit(): void {
document.body.style.visibility = 'hidden';
this.dateMin = new Date(this.today.getTime());
this.dateMax = new Date(this.today.getTime() + 60 * 24 * 60 * 60 * 1000);
this.headerText = [
{ 'text': 'New Booking' },
{ 'text': 'Train List' },
{ 'text': 'Add Passenger' },
{ 'text': 'Make Payment' }];
this.quotas = [
{ id: '1', text: 'Business Class' },
{ id: '2', text: 'Economy Class' },
{ id: '4', text: 'Common Class' }
];
this.gender = [
{ id: '1', text: 'Male' },
{ id: '2', text: 'Female' }
];
this.berths = [
{ id: '1', text: 'Upper' },
{ id: '2', text: 'Lower' },
{ id: '3', text: 'Middle' },
{ id: '4', text: 'Window' },
{ id: '5', text: 'Aisle' }
];
this.cities = [
{ name: 'Chicago', fare: 300 },
{ name: 'San Francisco', fare: 125 },
{ name: 'Los Angeles', fare: 175 },
{ name: 'Seattle', fare: 250 },
{ name: 'Florida', fare: 150 }
];
this.fields = { id: 'id', text: 'text', value: 'text' };
this.autoCompleteFields = { text: 'name', value: 'name' };
this.dlgButtons = [{
buttonModel: { content: 'Ok', isPrimary: true },
click: (() => {
(this.alertDlg as DialogComponent).hide();
(this.tab as TabComponent).enableTab(0, true);
(this.tab as TabComponent).enableTab(1, false);
(this.tab as TabComponent).enableTab(2, false);
(this.tab as TabComponent).enableTab(3, false);
(this.tab as TabComponent).select(0);
})
}];
}
public ngAfterViewInit(): void {
document.body.style.visibility = 'visible';
}
public showDate(): void {
(this.journeyDate as DatePickerComponent).show();
}
public trainSelected(args: RowSelectEventArgs): void {
this.selectedTrain = args.data;
}
public tabSelected(e: SelectEventArgs): void {
if (e.isSwiped) {
e.cancel = true;
}
}
public dlgCreated(): void {
(this.alertDlg as DialogComponent).hide();
}
public btnClicked(e: any): void {
switch (e.target.id) {
case 'searchNext':
/* Validate the Source, Destination, Date and Class chosen and proceed only if all the fields are selected */
if (!isNOU((this.startPoint as DropDownListComponent).value) && !isNOU((this.endPoint as DropDownListComponent).value) &&
!isNOU((this.ticketType as DropDownListComponent).value) && !isNOU((this.journeyDate as DatePickerComponent ).value)) {
if (!isNOU((this.startPoint as DropDownListComponent).value) && (this.startPoint as DropDownListComponent).value == (this.endPoint as DropDownListComponent).value) {
this.err1 = '* Arrival point cannot be same as Departure';
} else {
(this.tab as TabComponent).enableTab(0, false);
(this.tab as TabComponent).enableTab(1, true);
this.filterTrains(e);
(this.tab as TabComponent).select(1);
this.err1 = '';
this.err2 = '';
}
} else {
this.err1 = '* Please fill all the details before proceeding';
}
break;
case 'bookTickets':
/* Based on the selected station generate Grid content to display trains available */
if ((this.availTrainGrid as GridComponent).getSelectedRecords() === undefined || (this.availTrainGrid as GridComponent).getSelectedRecords().length === 0) {
this.err2 = '* Select your convenient train';
} else {
(this.tab as TabComponent).enableTab(2, true);
(this.tab as TabComponent).select(2);
(this.tab as TabComponent).enableTab(1, false);
this.err2 = '';
}
break;
case 'confirmTickets':
/* Get the Passenger details and validate the fields must not be left empty */
if ((this.input1 as any).nativeElement.value === '' || isNOU((this.passgender1 as DropDownListComponent).value) || isNOU((this.passage1 as NumericTextBoxComponent).value)) {
this.err3 = '* Please enter passenger details';
} else {
(this.tab as TabComponent).enableTab(3, true);
(this.tab as TabComponent).select(3);
(this.tab as TabComponent).enableTab(2, false);
this.err3 = '';
this.finalizeDetails(e);
}
break;
case 'makePayment':
this.alertDlg?.show();
break;
case 'goToSearch':
/* Go back to change class, date or boarding places */
this.selectedTrain = [];
(this.tab as TabComponent).enableTab(0, true);
(this.tab as TabComponent).select(0);
(this.tab as TabComponent).enableTab(1, false);
break;
case 'goBackToBook':
/* Change the preferred train chosen already */
(this.tab as TabComponent).enableTab(1, true);
(this.tab as TabComponent).select(1);
(this.tab as TabComponent).enableTab(2, false);
break;
case 'goBackDetails':
/* Update passenger detail before confirming the payment */
(this.tab as TabComponent).enableTab(2, true);
(this.tab as TabComponent).select(2);
(this.tab as TabComponent).enableTab(3, false);
break;
}
}
public filterTrains(args: any): void {
/* Generating trains based on source and destination chosen */
let fromCity: string = <string>this.startPoint?.value;
let toCity: string = <string>this.endPoint?.value;
let count: number = Math.floor((Math.random() * 3) + 2);
for (let i: number = 0; i < count; i++) {
let details = <Details>{};
details.TrainNo = Math.floor((Math.random() * 20) + 19000);
details.Name = 'Train ' + i;
details.Departure = fromCity;
details.Arrival = toCity;
details.Availability = Math.floor((Math.random() * 20) + 20);
this.result.push(details);
}
}
public availableTrainGridcreated(): void {
(this.availTrainGrid as GridComponent).dataSource = this.result;
}
public finalizeDetails(args: any): void {
/* Get the passenger details and update table with name and other details for confirmation */
let passCount: any = 0;
for (let i: number = 1; i <= 3; i++) {
if ((this.input1 as any).nativeElement.value !== '') {
let details = <Details>{};
let gender: any = (i === 1) ? (this.passgender1 as DropDownListComponent).value : (i === 2) ?
(this.passgender2 as DropDownListComponent).value : (this.passgender3 as DropDownListComponent).value;
let berth: any = (i === 1) ? (this.passBerth1 as DropDownListComponent).value : (i === 2) ?
(this.passBerth2 as DropDownListComponent).value : (this.passBerth3 as DropDownListComponent).value;
details.TrainNo = this.selectedTrain.TrainNo.toString();
details.PassName = (i === 1) ? (this.input1 as any).nativeElement.value : (i === 2) ?
(this.input2 as any).nativeElement.value : (this.input3 as any).nativeElement.value;
details.Gender = (gender === '') ? 'Male' : gender;
details.Berth = (berth === '') ? 'Any' : berth;
if (details.PassName !== '') { this.reserved.push(details); }
passCount++;
}
let calcFare: any = 0;
for (let i: number = 0; i < this.cities; i++) {
if ((this.startPoint as DropDownListComponent).value === this.cities[i].name) { calcFare = calcFare + this.cities[i].fare; }
if ((this.endPoint as DropDownListComponent).value === this.cities[i].name) { calcFare = calcFare + this.cities[i].fare; }
}
if ((this.ticketType as DropDownListComponent).value === 'Economy Class') {
this.displayAmt = "Total payable amount: $" + passCount * (300 + calcFare)
} else if ((this.ticketType as DropDownListComponent).value === 'Business Class') {
this.displayAmt = "Total payable amount: $" + passCount * (500 + calcFare)
} else if ((this.ticketType as DropDownListComponent).value === 'Common Class') {
this.displayAmt = "Total payable amount: $" + passCount * (150 + calcFare)
}
}
}
public ticketDetailGridcreated(): void {
(this.ticketDetailGrid as GridComponent).dataSource = this.reserved;
}
}
interface Details {
TrainNo: number;
Name: string;
Departure: string;
Arrival: string;
Availability: number;
PassName: string;
Gender: any;
Berth: string;
SeatNo: number;
}import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { GridAllModule } from '@syncfusion/ej2-angular-grids';
import { DialogAllModule } from '@syncfusion/ej2-angular-popups';
import { TabAllModule } from '@syncfusion/ej2-angular-navigations';
import { DatePickerAllModule } from '@syncfusion/ej2-angular-calendars';
import { NumericTextBoxAllModule } from '@syncfusion/ej2-angular-inputs';
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
FormsModule,
TabAllModule,
BrowserModule,
GridAllModule,
DialogAllModule,
DatePickerAllModule,
DropDownListAllModule,
NumericTextBoxAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);