I need to hide one of loggedInPages items in Ionic Conference App
For example I have an admin Page. When user logged in application, user can see admin page link in loggedInPages if user's role is admin .
loggedInPages: PageInterface[] = [
{ title: 'Account', name: 'AccountPage', component: AccountPage, icon: 'person' },
{ title: 'Support', name: 'SupportPage', component: SupportPage, icon: 'help' },
{ title: 'Logout', name: 'TabsPage', component: TabsPage, icon: 'log-out', logsOut: true },
{ title: 'Admin', name: 'Admin', component: AdminPage, icon: 'unlock'}
];
<ion-list>
<ion-list-header>
Account
</ion-list-header>
<button ion-item menuClose *ngFor="let p of loggedInPages" (click)="openPage(p)">
<ion-icon item-start [name]="p.icon" [color]="isActive(p)"></ion-icon>
{{p.title}}
</button>
</ion-list>
Instead of using loggedInPages field as it is in ngFor loop, you can create a function like getLoggedInPagesAsPerUserRole() which will return only the pages according to the role of the logged in user.
Related
Ionic app with a side menu
Here my app concept is Blog App
in this I need to log-in, profile, etc
Ionic app with a side menu
if user want to like or comment any blog post he must log-in first
so I want to manage session if the already log-in user so hide log-in ion-item from side menu else logout ion-item vise-Versa
Here is code
home.html
<ion-app>
<ion-split-pane contentId="main-content" >
<ion-menu contentId="main-content" >
<ion-header>
<ion-toolbar color="primary">
<ion-title>Lady Help Lady</ion-title>
</ion-toolbar>
</ion-header>
<ion-content color="primary">
<ion-list >
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
<ion-item color="primary" [routerDirection]="'root'" [routerLink]="[p.url]">
<ion-icon slot="start" [name]="p.icon" color="light"></ion-icon>
<ion-label color="light">
{{p.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle auto-hide="false" >
<ion-item color="primary" *ngIf="showBtnLogin">
<ion-icon slot="start" name="log-in" color="light"></ion-icon>
<ion-label color="light" (click)="login()">
Login
</ion-label>
</ion-item>
<ion-item color="primary" *ngIf="!showBtnLogin">
<ion-icon slot="start" name="log-out" color="light"></ion-icon>
<ion-label color="light" (click)="logout()" > Log Out</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="main-content"></ion-router-outlet>
</ion-split-pane>
</ion-app>
home.page.ts
import { Component, OnInit } from '#angular/core';
import { Router} from '#angular/router';
import { MenuController } from '#ionic/angular';
import { AuthService } from '../services/auth.service';
import { StorageService } from '../services/storage.service';
#Component({
selector: 'app-home',
templateUrl: './home.page.html',
styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {
public appPages = [
{
title: 'Blog',
url: '/home/blog',
icon: 'home'
},
{
title: 'Profile',
url: '/home/profile',
icon: 'cog'
},
{
title: 'Change Password',
url: '/home/change-password',
icon: 'lock'
},
{
title: 'About Us',
url: '/home/about-us',
icon: 'cog'
},
{
title: 'Privacy Policy',
url: '/home/privacy-policy',
icon: 'settings'
}
,
{
title: 'Terms & Conditions',
url: '/home/terms-conditions',
icon: 'paper'
},
{
title: 'Enable Location',
url: '/home/enable-location',
icon: 'pin'
}
,
{
title: 'Donation',
url: '/home/donation',
icon: 'card'
}
];
public authUser: any;
showBtnLogin = true;
// showBtnLogout: boolean = true;
currentUser: any;
constructor(private router: Router,
private authService: AuthService,
private menu: MenuController,
public storageService: StorageService) { }
ngOnInit() {
this.authService.userData$.subscribe((res: any) => {
this.authUser = res;
if (res === null) {
console.log(res);
this.showBtnLogin = false;
} else {
this.showBtnLogin = true;
}
});
}
logout() {
this.authService.logout();
}
login() {
this.router.navigate(['/home/login']);
}
}
login.page.ts
validateInputs() {
const mobile = this.postData.mobile.trim();
const password = this.postData.password.trim();
return (
this.postData.mobile &&
this.postData.password &&
mobile.length > 0 &&
password.length > 0
);
}
formLogin() {
if (this.validateInputs()) {
this.loader.loadingPresent();
console.log(this.postData);
this.authService.login(this.postData).subscribe(
(res: any) => {
if (res.status === true) {
this.loader.loadingDismiss();
// Storing the User data.
this.storageService.store(AuthConstants.AUTH, res.logindata);
this.router.navigate(['/home/blog']);
} else {
this.loader.loadingDismiss();
this.toastService.presentToast(res.error);
}
},
(error: any) => {
this.loader.loadingDismiss();
this.toastService.presentToast('Network Issue.');
}
);
} else {
this.loader.loadingDismiss();
this.toastService.presentToast('Please enter mobile or password.');
}
}
StorageService.ts
import { Injectable } from '#angular/core';
import { Plugins } from '#capacitor/core';
const { Storage } = Plugins;
#Injectable({
providedIn: 'root'
})
export class StorageService {
constructor() { }
// Store the value
async store(storageKey: string, value: any) {
const encryptedValue = btoa(escape(JSON.stringify(value)));
await Storage.set({
key: storageKey,
value: encryptedValue
});
}
// Get the value
async get(storageKey: string) {
const ret = await Storage.get({ key: storageKey });
return JSON.parse(unescape(atob(ret.value)));
}
async removeStorageItem(storageKey: string) {
await Storage.remove({ key: storageKey });
}
// Clear storage
async clear() {
await Storage.clear();
}
}
You can also do that like this
in your html
<ion-menu-toggle auto-hide="false" >
<ion-item color="primary" *ngIf="showBtnLogin">
<ion-icon slot="start" name="log-in" color="light"></ion-icon>
<ion-label color="light" (click)="login()">
Login
</ion-label>
</ion-item>
<ion-item color="primary" *ngIf="!showBtnLogin">
<ion-icon slot="start" name="log-out" color="light"></ion-icon>
<ion-label color="light" (click)="logout()" > Log Out</ion-label>
</ion-item>
</ion-menu-toggle>
in your .ts
showBtnLogin: boolean = true;
currentUser: any;
ngOnInit() {
this.authService.userData$.subscribe((res: any) => {
this.authUser = res;
// this.postData.user_id = res.id;
console.log(this.authUser.id);
this.currentUser = this.authUser;
if (res === null) {
this.showBtnLogin = true;
} else {
this.showBtnLogin = false;
}
});
}
logout() {
this.authService.logout();
}
login() {
this.router.navigate(['/home/login']);
}
Change some code in your .ts file here it is
showBtnLogin = true;
public appPages = [
{
title: 'Blog',
url: '/home/blog',
icon: 'home'
},
{
title: 'Profile',
url: '/home/profile',
icon: 'cog',
status: true
},
{
title: 'Change Password',
url: '/home/change-password',
icon: 'lock',
status: true
},
{
title: 'About Us',
url: '/home/about-us',
icon: 'cog',
status: true
},
{
title: 'Privacy Policy',
url: '/home/privacy-policy',
icon: 'settings',
status: true
}
,
{
title: 'Terms & Conditions',
url: '/home/terms-conditions',
icon: 'paper',
status: true
},
{
title: 'Enable Location',
url: '/home/enable-location',
icon: 'pin',
status: true
}
,
{
title: 'Donation',
url: '/home/donation',
icon: 'card',
status: true
}
];
In your ngOnInit
ngOnInit() {
this.authService.userData$.subscribe((res: any) => {
this.authUser = res;
if (res === null) {
console.log(res);
this.showBtnLogin = false;
for (let i = 0; i < this.appPages.length; i++) {
if (this.appPages[i].title == 'Profile') {
this.appPages[i].status = false;
}
if (this.appPages[i].title == 'Change Password') {
this.appPages[i].status = false;
}
}
} else {
this.showBtnLogin = true;
}
});
}
if your profile and change password index not change then you can directly change status via index without using for loop
and finally in your logout
logout() {
this.authService.logout();
for (let i = 0; i < this.appPages.length; i++) {
if (this.appPages[i].title == 'Profile') {
this.appPages[i].status = false;
}
if (this.appPages[i].title == 'Change Password') {
this.appPages[i].status = false;
}
}
}
In your .html file
<ion-list>
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
<ion-item [routerDirection]="'root'" [routerLink]="[p.url]" *ngIf="p.status">
<ion-icon slot="start" [name]="p.icon"></ion-icon>
<ion-label>
{{p.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle auto-hide="false">
<ion-item color="primary" *ngIf="showBtnLogin">
<ion-icon slot="start" name="log-in" color="light"></ion-icon>
<ion-label color="light" (click)="login()">
Login
</ion-label>
</ion-item>
<ion-item color="primary" *ngIf="!showBtnLogin">
<ion-icon slot="start" name="log-out" color="light"></ion-icon>
<ion-label color="light" (click)="logout()"> Log Out</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
I am trying to add list in bottom sheet but ionic gave us an array so we can add class there and style it.
What i am trying to ask is how we can make a list or totally our own html code and pass it to bottom sheet function that will just display?
async presentActionSheet() {
const actionSheet = await this.actionSheetController.create({
header: 'Albums',
buttons: [{
text: 'Delete',
role: 'destructive',
icon: 'trash',
handler: () => {
console.log('Delete clicked');
}
}, {
text: 'Share',
icon: 'share',
handler: () => {
console.log('Share clicked');
}
}, {
text: 'Play (open modal)',
icon: 'arrow-dropright-circle',
handler: () => {
console.log('Play clicked');
}
}, {
text: 'Favorite',
icon: 'heart',
handler: () => {
console.log('Favorite clicked');
}
}, {
text: 'Cancel',
icon: 'close',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}]
});
await actionSheet.present();
}
It is by default action sheet, what i want is to make it in DOM. I have found the similar question here with no answer Similar Question URL Please see what i need...!
What i need
Try with Modal Component
home.page.html
<ion-button (click)="OpenModel()">
Open Modal (Bottom)
<ion-icon mode="ios" name="arrow-forward"></ion-icon>
</ion-button>
home.page.ts
import { ModalController } from '#ionic/angular';
import { ModalpagePage } from '../modalpage/modalpage.page';
constructor(private modalCtrl: ModalController) {}
async OpenModel(){
const presentModel = await this.modalCtrl.create({
component: ModalpagePage,
componentProps: {
title: 'Billing Address',
type:'billing',
},
showBackdrop: true,
mode: "ios",
cssClass: 'change-address-shipping-modal'
});
presentModel.onWillDismiss().then((data)=>{
console.log(data);
//custom code
});
return await presentModel.present();
}
modalpage.page.html
<ion-header>
<ion-toolbar text-center>
<ion-title>
Modal title
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div>
HTML CODE HERE
</div>
</ion-content>
Declare in app.module.ts
declarations: [AppComponent, ModalpagePage],
entryComponents: [ModalpagePage],
Global.scss
.change-address-shipping-modal{
--height:60%;
align-items: flex-end;
}
ScreenShot
Demo
Currently action sheet does not allow you to add html code in it. This feature is however requested you can see here https://github.com/ionic-team/ionic/issues/16718
Try <ion-card>
<ion-header> </ion-header>
<ion-content> </ion-content>
<ion-card> </ion-card>
<ion-footer> </ion-footer>
you can use *ngIf to control ion-card
example:
in page.ts
showCard:Boolean = true;
constructor(){}
ngOnInit() {}
in page.html
<ion-card *ngIf="showCard"> </ion-card>
https://ionicframework.com/docs/api/card
Ionic4 radio group misbehaving while changing the radio group list values dynamically.
Let's take my use case, I have one field country (ion-select) which has a list of countries. Another field called state (ion-radio-group) this will be visible the value based on the country selection. States will be showing fine based on the country selection but the issue is when I click the radio group it will not react in the UI. When I do doubt click the selection will be reflected in the radio group. Why it is not reflected in my first click. Please guide me.
homepage.html
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>
Home
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-item>
<ion-label>Country</ion-label>
<ion-select interface="popover" [(ngModel)]="selectedCountry['result']" (ionChange)="changeCountryCallback()">
<ion-select-option *ngFor="let country of pickListValues['country']" value="{{country.choiceValue}}"
[selected]=false>
{{country.choice}}
</ion-select-option>
</ion-select>
</ion-item>
<ion-item *ngIf="selectedCountry['result'] != ''">
<ion-row>
<ion-label>State</ion-label>
</ion-row>
<ion-row>
<ion-list lines="none">
<ion-radio-group (ionChange)="changeStateCallback()" [(ngModel)]="selectedState">
<ion-item *ngFor="let state of selectedCountry['state']">
<ion-label>{{state.choice}}</ion-label>
<ion-radio slot="start" value="{{state.choiceValue}}" [checked]="false"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
</ion-row>
</ion-item>
</ion-content>
homepage.ts
import { Component, OnInit} from '#angular/core';
#Component({
selector: 'app-homepage',
templateUrl: './homepage.html',
styleUrls: ['./homepage.scss'],
})
export class homepage implements OnInit {
private pickListValues = {
country: [{
choiceValue: "in",
choice: "India",
child: {
value: [{
choiceValue: "tn",
choice: "Tamilnadu",
child: {
value: []
}
}, {
choiceValue: "dl",
choice: "Delhi",
child: {
value: []
}
}, {
choiceValue: "mi",
choice: "Mumbai",
child: {
value: []
}
}]
}
}, {
choiceValue: "ci",
choice: "China",
child: {
value: [{
choiceValue: "AH",
choice: "Anhui Province",
child: {
value: []
}
}, {
choiceValue: "GX",
choice: "Guangxi Zhuang",
child: {
value: []
}
}]
}
}, {
choiceValue: "jp",
choice: "Japan",
child: {
value: [{
choiceValue: "gu",
choice: "Gunma",
child: {
value: []
}
}, {
choiceValue: "kw",
choice: "Kanagawa",
child: {
value: []
}
}, {
choiceValue: "oki",
choice: "Okinawa",
child: {
value: []
}
}, {
choiceValue: "tok",
choice: "Tokushima",
child: {
value: []
}
}]
}
}]
}
selectedCountry = {
result: "",
state: []
}
selectedState: any;
constructor() {
}
ngOnInit() {
}
changeCountryCallback() {
console.log("Country Value : ", this.selectedCountry['result']);
this.pickListValues['country'].forEach(element => {
console.log("Element : ", element);
if (element['choiceValue'] == this.selectedCountry['result']) {
this.selectedCountry['state'] = [];
this.selectedCountry['state'] = element['child']['value'];
}
})
}
changeStateCallback() {
console.log("State Value : ", this.selectedState);
}
}
My expected behavior is the radio group to be working fine with a single click after changing the country values frequently
Please watch up to end of the video you can understand my issue. Click here for video
<ion-content>
<ion-item>
<ion-label>Country</ion-label>
<ion-select interface="popover" [(ngModel)]="selectedCountry['result']" (ionChange)="changeCountryCallback()">
<ion-select-option *ngFor="let country of pickListValues['country']" value="{{country.choiceValue}}" [selected]=false>
{{country.choice}}
</ion-select-option>
</ion-select>
</ion-item>
<ion-item *ngIf="selectedCountry['result'] != ''">
<ion-row>
<ion-label>State</ion-label>
</ion-row>
<ion-row>
<ion-list lines="none">
<ion-radio-group (ionChange)="changeStateCallback()" [(ngModel)]="selectedState">
<ion-item *ngFor="let state of selectedCountry['state']">
<ion-label>{{state.choice}}</ion-label>
<ion-radio slot="start" value="{{state.choiceValue}}" [checked]="selectedState==state.choiceValue"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
</ion-row>
</ion-item>
</ion-content>
You can accomplish by the above mentioned way([checked]="selectedState==state.choiceValue"). Here I checked which one is selected from the passed array. So on the first click, it should be working fine. Please try it and share the feedback.
<div>
<ion-label class="heading">Gender</ion-label>
<div *ngFor='let gend of gen'>\\ gen have my details
<ion-radio-group [(ngModel)]="register.Gender" [ngModelOptions]="{standalone: true}">
<ion-row style='margin-top:10px'>
<ion-col size='10'>
<ion-label style='color: #b4b4b4;margin:0 0 0 40px'> {{gend.name}}</ion-label>
</ion-col>
<ion-col size='2'>
<ion-radio [value]="gend.name"></ion-radio>\\value bind to ngModel
</ion-col>
</ion-row>
</ion-radio-group>
</div>
</div>
I am working on Ionic App and I want to show I am showing the input fields in the alert but the problem is that, I am not able to show the textarea and the select box in the alert controller.
This is my popupdetails.ts file:
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams, LoadingController, AlertController } from 'ionic-angular';
#IonicPage()
#Component({
selector: 'page-checkout',
templateUrl: 'checkout.html',
})
export class CheckoutPage {
constructor(public navCtrl: NavController, public navParams: NavParams,
public loadingCtrl: LoadingController, private alertCtrl: AlertController) {
}
presentPrompt() {
let alert = this.alertCtrl.create({
title: 'Submit Shipping Details',
inputs: [
{
name: 'name',
placeholder: 'Name'
},
{
name: 'mobilenumber',
placeholder: 'Mobile Number',
type: 'number'
},
{
name: 'pincode',
placeholder: 'Pincode',
type: 'number'
},
{
name: 'state',
placeholder: 'State',
},
{
name: 'city',
placeholder: 'City',
},
{
name: 'address',
placeholder: 'Address',
},
],
buttons: [
{
text: 'Cancel',
role: 'cancel',
handler: data => {
console.log('Cancel clicked');
}
},
{
text: 'Submit',
handler: data => {
console.log('Submit clicked');
}
}
]
});
alert.present();
}
}
In this, I have used the alert controller to the input fields but the problem is that, I am not able to show the textarea and the select box in the alert controller.
This is my output currently coming.
I want this type of output with textarea and the select box.
Any help is much appreciated.
https://stackblitz.com/edit/ionic-x1os3c please check this link may hope it will help you
<ion-content padding style="background:white">
<ion-list no-lines>
<form>
<p style="font-weight:bold">Name</p>
<ion-item>
<ion-label hidden></ion-label>
<ion-input style="border:1px solid black" type='text'></ion-input>
</ion-item>
<p style="font-weight:bold">Mobile</p>
<ion-item>
<ion-label hidden></ion-label>
<ion-input style="border:1px solid black" type='tel'></ion-input>
</ion-item>
<p style="font-weight:bold">Country</p>
<ion-item>
<ion-label hidden></ion-label>
<ion-input style="border:1px solid black" readonly="true" type='text'></ion-input>
</ion-item>
</form>
<ion-grid>
<ion-row>
<ion-col>
<button color="secondary" ion-button float-right>Add</button>
<button color="light" ion-button float-right>Close</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-list>
</ion-content>
I want when I clicked feedback button can go feedback page, but after I set up all, after clicked still showing tabsPage.
app.component.ts
appPages: PageInterface[] = [
{ title: '新闻', name: 'TabsPage', component: TabsPage, index: 0, icon: 'ios-globe-outline' },
{ title: 'SOS', name: 'TabsPage', component: TabsPage, index: 1, icon: 'call' },
{ title: '服务', name: 'TabsPage', component: TabsPage, index: 2, icon: 'people' },
{ title: '反馈', name: 'FeedbackPage', component: FeedbackPage, icon: 'contacts' }
];
loggedInPages: PageInterface[] = [
{ title: '新闻', name: 'TabsPage', component: TabsPage, index: 0, icon: 'ios-globe-outline' },
{ title: 'SOS', name: 'TabsPage', component: TabsPage, index: 1, icon: 'call' },
{ title: '服务', name: 'TabsPage', component: TabsPage, index: 2, icon: 'people' },
{ title: '反馈', name: 'FeedbackPage', component: FeedbackPage, icon: 'contacts' },
{ title: '注销', name: 'TabsPage', component: TabsPage, icon: 'log-out', logsOut: true }
];
The last one is the feedback button, when I click feedback button just back to tabsPage not go into feedback page.
UPDATE:
I am checking this code in app.components.ts
openPage(page: PageInterface) {
let params = {};
if (page.index) {
params = { tabIndex: page.index };
}
if (this.nav.getActiveChildNavs().length && page.index != undefined) {
this.nav.getActiveChildNavs()[0].select(page.index);
} else {
// Set the root of the nav with params if it's a tab index
this.nav.setRoot(page.name, params).catch((err: any) => {
console.log(`Didn't set nav root: ${err}`);
});
}
if (page.logsOut === true) {
// Give the menu time to close before changing to logged out
this.userData.logout();
}
}
Is it need to change params?
app.html
<ion-menu id="loggedOutMenu" [content]="content">
<ion-header>
<ion-toolbar color="danger">
<ion-title>菜单</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-list-header>请登录</ion-list-header>
<button color="wechat" style="width:40%" ion-button clear (click)= "wechatLogin()">
<ion-icon name="minan-login-wechat"></ion-icon>
</button>
<button color="facebook" style="width:40%" ion-button clear (click)= "FBLogin()">
<ion-icon name="minan-login-facebook"></ion-icon>
</button>
<ion-list-header>导航栏</ion-list-header>
<button menuClose ion-item *ngFor="let p of appPages" (click)="openPage(p)">
<ion-icon item-start [name]="p.icon" [color]="isActive(p)"></ion-icon>
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
Feedback page doesn't have own module because I am using 'ionic generate page Feedback --no-module' to generate my Feedback page
This means you are not using lazy loading and the page is not an IonicPage.
#IonicPage()
which sets the name property as the component name by default.
This will automatically create a link to the MyPage component using the same name as the class, name: 'MyPage'. The page can now be navigated to by using this name.
And also you dont have PageModule
In your case, you will have to set the imported component/page and not the string with your NavController functions.
Do:
this.nav.setRoot(page.component, params).catch((err: any) => {
console.log(`Didn't set nav root: ${err}`);
});//page.component
Based on your app structure, you app might be based on ionic conference starter template, what iv'e done is remove extra parameters in IonicModule.forRoot(ConferenceApp), like links array and extra objects, then do the lazy loading for your pages by Adding and importing an #IonicPage() on your components.
Before:
IonicModule.forRoot(ConferenceApp, {}, {
links: [
{ component: TabsPage, name: 'TabsPage', segment: 'tabs-page' },
{ component: SchedulePage, name: 'Schedule', segment: 'schedule' },
{ component: SessionDetailPage, name: 'SessionDetail', segment: 'sessionDetail/:sessionId' },
{ component: ScheduleFilterPage, name: 'ScheduleFilter', segment: 'scheduleFilter' },
{ component: SpeakerListPage, name: 'SpeakerList', segment: 'speakerList' },
{ component: SpeakerDetailPage, name: 'SpeakerDetail', segment: 'speakerDetail/:speakerId' },
{ component: MapPage, name: 'Map', segment: 'map' },
{ component: AboutPage, name: 'About', segment: 'about' },
{ component: TutorialPage, name: 'Tutorial', segment: 'tutorial' },
{ component: SupportPage, name: 'SupportPage', segment: 'support' },
{ component: AccountPage, name: 'AccountPage', segment: 'account' },
{ component: SignupPage, name: 'SignupPage', segment: 'signup' }
]
After:
IonicModule.forRoot(ConferenceApp),
login.module.ts
import { NgModule } from '#angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LoginPage } from './login';
#NgModule({
declarations: [
LoginPage,
],
imports: [
IonicPageModule.forChild(LoginPage),
],
})
export class RequestTrainingPageModule {}
login.ts
import { Component } from '#angular/core';
import { NgForm } from '#angular/forms';
import { IonicPage, NavController } from 'ionic-angular';
import { UserOptions } from '../../interfaces/user-options';
import { UserData } from '../../providers/user-data';
import { TabsPage } from '../tabs-page/tabs-page';
#IonicPage()
#Component({
selector: 'page-user',
templateUrl: 'login.html'
})
export class LoginPage {
login: UserOptions = { username: '', password: '' };
submitted = false;
constructor(public navCtrl: NavController, public userData: UserData) { }
onLogin(form: NgForm) {
this.submitted = true;
if (form.valid) {
this.userData.login(this.login.username);
this.navCtrl.push(TabsPage);
}
}
onSignup() {
this.navCtrl.push('SignupPage');
}
}