Ionic 4 Forms Tutorial - Login & Register UI Example With Theming - Techiediaries

21/4/2019 Ionic 4 Forms Tutorial: Login & Register UI Example with Theming | Techiediaries
Techiediaries
Ionic 4 Forms Tutorial:

Login & Register UI
Example with Theming x
WP 2019 Free Beta Theme
Ad
Receive an Ionic 4 tutorial each 3 days.
Your e-mail Subscribe
In this tutorial, we'll learn how to use Angular forms in Ionic 4 by building a simple login and registration
example with theming.
In the previous tutorial, we've created a JWT authentication server with Node and Express.js and
implemented an authentication service with Angular services and HttpClient in our Ionic 4
application.
Check out the previous tutorial: Ionic 4 JWT Authentication Tutorial: Using Angular
HttpClient with Node & Express.js Server
In this part, we'll create the actual UI with built-in Ionic 4 components and Angular forms.
https://www.techiediaries.com/ionic-ui-forms-theming/ 1/15
We'll be using Ionic 4 components such as the Ionic Grid, Input fields and Buttons. x
We'll also see how to use some CSS variables like --background and --color for custom theming
the UI components and the color property of Ionic components to assign different types of standard Ionic
colors such as the primary and secondary colors to the components.
1 WP 2019 Free Beta Theme
Early Access to All Features in Beta.Try Now Our Incredible Page

Builder ColibriWPTheme
2 Best HTML Form Builder Plugin -

Download It For Free
x
Install weForms- the best HTML contact form builder plugin for
your website. wedevs.com
We'll see how to use Angular routing to navigate between different pages of our Ionic 4 application.
We've created an Ionic 4 project, created a module that encapsulates authentication and created a service
that implements the register() , login() , logout() and isLoggedIn() methods. Let's now
create the UI pages and components.
Creating the Register Page

Head back to your terminal and run the following command to generate a register page inside the auth
module:
$ ionic generate page auth/register
This will create the following files:
src/app/auth/register/register.module.ts ,
src/app/auth/register/register.page.scss ,
src/app/auth/register/register.page.html ,
src/app/auth/register/register.page.spec.ts ,
src/app/auth/register/register.page.ts
It will also update the src/app/app-routing.module.ts file to enable routing to this page by adding x
the following route:
{ path: 'register', loadChildren: './auth/register/register.module#RegisterPageMod
This means, you can access the registration page http://localhost:8100/register .
Open the src/app/auth/register/register.page.ts file and import then inject AuthService and
Router :
import { Component, OnInit } from '@angular/core';

import { Router } from "@angular/router";
import { AuthService } from '../auth.service';
x
@Component({
selector: 'app-register',
templateUrl: './register.page.html',
styleUrls: ['./register.page.scss'],
})
export class RegisterPage implements OnInit {
constructor(private authService: AuthService, private router: Router) { }
ngOnInit() {
}
Next, add the register() method that will be called for registering users:
register(form) {
this.authService.register(form.value).subscribe((res) => {
this.router.navigateByUrl('home');
});
}
This method simply calls the register() method of AuthService , subscribe to the returned
Observable and navigate to the home page when registration is done.
We use the navigateByUrl() method of the Angular Router to navigate to a page by its URL.
The register() method takes an Angular form object. The value variable contains a JS object that x
corresponds to the fields of the form and their values.
Next open the src/auth/register/register.page.html file and add a form inside <ion-
content> :
<ion-content color="primary">
<form #form="ngForm" (ngSubmit)="register(form)">
<ion-grid>
<ion-row color="primary" justify-content-center>
<ion-col align-self-center size-md="6" size-lg="5" size-xs="12">
<div text-center>
<h3>Create your account!</h3>
</div>
<div padding>
<ion-item>
x
<ion-input name="name" type="text" placeholder="Name" ngModel require
</ion-item>
<ion-item>
<ion-input name="email" type="email" placeholder="your@email.com" ngMo
</ion-item>
<ion-item>
<ion-input name="password" type="password" placeholder="Password" ngMo
</ion-item>
<ion-item>
<ion-input name="confirm" type="password" placeholder="Password again"
</ion-item>
</div>
<div padding>
<ion-button size="large" type="submit" [disabled]="form.invalid" expand
</div>
</ion-col>
</ion-row>
</ion-grid>
</form>
</ion-content>
We assign the primary Ionic color to <ion-content> and <ion-row> components.
Next, let's add some styling. Open the src/auth/register/register.page.scss file and add:
x
ion-item{
--background: #3880ff;
--color: #fff;
}
ion-button{
--background: #062f77;
}
We use the --background and --color variables to change the colors of <ion-item> and <ion-
button> components.
This is the screenshot our registration page:
Creating a Login Page

Next, let's create a login page. In your terminal, run the following command:
$ ionic generate page auth/login
The following files will be created:
src/app/auth/login/login.module.ts ,
src/app/auth/login/login.page.scss ,
src/app/auth/login/login.page.html ,
src/app/auth/login/login.page.spec.ts ,
src/app/auth/login/login.page.ts
The src/app/app-routing.module.ts will be updated with the following route:
{ path: 'login', loadChildren: './auth/login/login.module#LoginPageModule' },
The loadChildren property is used to lazy load the login module.
Now, open the src/app/auth/login/login.page.ts file, import and inject both AuthService and
Router :
x
import { Component, OnInit } from '@angular/core';
import { Router } from "@angular/router";
import { AuthService } from '../auth.service';
@Component({
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
constructor(private authService: AuthService, private router: Router) { }
ngOnInit() {
}
x
}
Next, add the login() method:
login(form){
this.authService.login(form.value).subscribe((res)=>{
this.router.navigateByUrl('home');
});
}
The login() method simply calls the login() method of AuthService and subscribe to the
returned Observable then navigate to the home page when login is done.
Let's now create the login UI. Open the src/app/auth/login/login.page.html file and add the
following code:
<ion-content color="primary" padding>

<form #form="ngForm" (ngSubmit)="login(form)">
<ion-grid>
<ion-row color="primary" justify-content-center>
<ion-col align-self-center size-md="6" size-lg="5" size-xs="12">
<div text-center>
<h3>Login</h3>
</div>
<div padding>
<ion-item>
<ion-input name="email" type="email" placeholder="your@email.com" ngMo x

</ion-item>
<ion-item>
<ion-input name="password" type="password" placeholder="Password" ngMo
</ion-item>
</div>
<div padding>
<ion-button size="large" type="submit" [disabled]="form.invalid" expand=
</div>
</ion-col>
</ion-row>
</ion-grid>
</form>
</ion-content>
We use the Ionic Grid to place the form elements.

x
Open the src/app/auth/login/login.page.scss file and add these styles:
ion-item{
--background: #3880ff;
--color: #fff;
}
ion-button{
--background: #062f77;
}
Next, let's add a link to the register page to allow users to register if they don't already have an account.
Inside the <ion-grid> component add:
<ion-row>
<div text-center>
If you don't have an account, please <a routerLink='/register'>
register</a> first!
</div>
</ion-row>
We use the routerLink directive of Angular Router to create a link to the register page.
In the src/app/auth/login/login.page.scss file, add:
x
a{
color: #fff;
}
This is a screenshot of the login page:
Conclusion
That's it we have created our login and registration system using Ionic 4 and Angular 7 in the front-end
x
and Node, Express.js in the backend.
22 Jan 2019
ionic
« Ionic 4 JWT Authentication Tutorial: Using Angular HttpClient with Node & Express.js
Server
Angular 7|6 Tutorial: Building and Submitting a Form (ngModel | ngForm | ngSubmit) to a
Node and Express.js Authentication Server »
Author
Team
Techiediaries is a website
dedicated to bring you
tutorials for the latest web
technologies
report this ad
RELATED TUTORIALS
How to start a website from A to Z: A 5-step guide [Sponsored]
3 simple steps to increase your website conversion rate [Sponsored]
Ionic 4 React Tutorial: Build a Mobile App with Ionic 4, Axios and React
Build a CRM App with Ionic 4/Angular and TypeORM: Custom Webpack Configuration
[Part 1]
Multiple Image/File Upload with Django, Ionic 4 and FormData
Ionic 4 JWT Authentication Tutorial: Using Angular HttpClient with Node & Express.js
Server
Ionic 4 Tutorial: Your First Ionic/Angular v4 Application
Ionic 3 Grid System Tutorial
Learn Ionic 3: Easy Steps Tutorial

Popular React Tutorials

React 16.3 New Context API Tutorial
PHP, MySQL & React REST API Tutorial with Example Form
Understanding React setState()
React Router 4 Tutorial (with Examples)
React Routing Tutorial: Using React Router 4
React Bootstrap Tutorial: Integrating Bootstrap 4 with React
Redux Tutorial
The useState React Hook by Example
React 16.7 Hooks Tutorial
React Router Redux Tutorial x
React Tutorial: The Basics
Ajax API Calls in React
Popular Ionic Tutorials

Build a CRM App with Ionic 4/Angular and TypeORM: Custom Webpack Configuration
[Part 1]
Multiple Image/File Upload with Django, Ionic 4 and FormData
Ionic 4 Forms Tutorial: Login & Register UI Example with Theming
Ionic 4 JWT Authentication Tutorial: Using Angular HttpClient with Node & Express.js
Server
Ionic 4 Tutorial: Your First Ionic/Angular v4 Application
Ionic 4/Angular Routing and Navigation Tutorial & Examples
Ionic 4/Angular Http POST by Example
Access & Update Parent State from Child Components in React
Popular PHP Tutorials

PHP, MySQL & React REST API Tutorial with Example Form
Create PHP 7 MySQL Database Tables Using MySQLi & PDO
PHP PDO Tutorial: CRUD Example with MySQL
Laravel 5.8 REST API CRUD Tutorial
Laravel 5.8 Tutorial x

PHP 7 Tutorial with MySQL: CRUD REST API
Using Vue.js in PHP Tutorial
Popular Django Tutorials

Django 2 Tutorial
Django CORS
Using Electron with Python
Django & Bootstrap 4 Form
Django CRUD with Generic Views
SUBSCRIBE
x
Receive an Ionic 4 tutorial each 3 days.
Your e-mail Subscribe
JOIN OUR COMMUNITY!
   
AD
What do you think?

8 Responses report this ad
report this ad
Upvote Funny Love Surprised Angry Sad
6 Comments techiediaries  Esteban Rodriguez

x
 Recommend 3 t Tweet f Share Sort by Best
Join the discussion…
Shawn Miller • 2 months ago

got everything down. but, now when u login how to get to home page?
△ ▽ • Reply • Share ›
techiediaries.com Mod > Shawn Miller • 2 months ago

Notice this line in the login() method: this.router.navigateByUrl('home');
This tells the router to navigate to the home page.

Shawn Miller > techiediaries.com • 2 months ago

Yeah. Though it didn't work, press the button and it doesn't go to 'home'
Show more replies
Ramadhan Himejima • 2 months ago

where the auth.service?
Yoga Raihan Mahendra > Ramadhan Himejima • 2 months ago

up gan
techiediaries.com Mod > Yoga Raihan Mahendra • 2 months ago

https://www.techiediaries.c...
R l Sh
△ ▽ • Reply • Share › x
ALSO ON TECHIEDIARIES
Ionic 4 Tutorial: Your First Ionic/Angular v4 Nest.js Tutorial: JWT Authentication with
Application Passport.js
4 comments • 4 months ago 1 comment • 2 months ago
Jonathan Tolbert — You right.. I just felt part I Rodrigo Correa — how can I patch the
Avatarwas so good, I'm eager to continue.. Avatarpassword?
What is an Angular 6|7 Workspace? Angular 7|6 Course: Nested Router-Outlet,

1 comment • 3 months ago Child Routes & forChild()
Bernardao — Why not using nrwl?It's interesting 1 comment • 4 months ago
Avatarwhat you have explained, but I see it with a Rob Simpson — This is a great start to what I am
strong relation with Nrwl.Thank you for your … Avatartrying to do. With the child router outlet, is there
a way to have data: { something: 'Admin …
✉ Subscribe d Add Disqus to your siteAdd DisqusAdd 🔒 Disqus' Privacy PolicyPrivacy PolicyPrivacy
Copyright © 2019 Techiediaries x
Custom Search

Ionic 4 Forms Tutorial - Login & Register UI Example With Theming - Techiediaries

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Ionic 4 Forms Tutorial - Login & Register UI Example With Theming - Techiediaries

Încărcat de

Drepturi de autor:

Formate disponibile

21/4/2019 Ionic 4 Forms Tutorial: Login & Register UI Example with Theming | Techiediaries

Ionic 4 Forms Tutorial:

Receive an Ionic 4 tutorial each 3 days.

Your e-mail Subscribe

1 WP 2019 Free Beta Theme

Early Access to All Features in Beta.Try Now Our Incredible Page

2 Best HTML Form Builder Plugin -

Creating the Register Page

$ ionic generate page auth/register

This will create the following files:

{ path: 'register', loadChildren: './auth/register/register.module#RegisterPageMod

This means, you can access the registration page http://localhost:8100/register .

import { Component, OnInit } from '@angular/core';

constructor(private authService: AuthService, private router: Router) { }

We assign the primary Ionic color to <ion-content> and <ion-row> components.

This is the screenshot our registration page:

Creating a Login Page

$ ionic generate page auth/login

The following files will be created:

The src/app/app-routing.module.ts will be updated with the following route:

{ path: 'login', loadChildren: './auth/login/login.module#LoginPageModule' },

The loadChildren property is used to lazy load the login module.

constructor(private authService: AuthService, private router: Router) { }

Next, add the login() method:

<ion-content color="primary" padding>

<ion-input name="email" type="email" placeholder="your@email.com" ngMo x

We use the Ionic Grid to place the form elements.

In the src/app/auth/login/login.page.scss file, add:

This is a screenshot of the login page:

3 simple steps to increase your website conversion rate [Sponsored]

Multiple Image/File Upload with Django, Ionic 4 and FormData

Ionic 4 Tutorial: Your First Ionic/Angular v4 Application

Ionic 3 Grid System Tutorial

Learn Ionic 3: Easy Steps Tutorial

Popular React Tutorials

Popular Ionic Tutorials

Popular PHP Tutorials

Laravel 5.8 Tutorial x

Popular Django Tutorials

Receive an Ionic 4 tutorial each 3 days.

Your e-mail Subscribe

JOIN OUR COMMUNITY!

What do you think?

Upvote Funny Love Surprised Angry Sad

6 Comments techiediaries  Esteban Rodriguez

Join the discussion…

Shawn Miller • 2 months ago

techiediaries.com Mod > Shawn Miller • 2 months ago

This tells the router to navigate to the home page.

Shawn Miller > techiediaries.com • 2 months ago

Show more replies

Ramadhan Himejima • 2 months ago

Yoga Raihan Mahendra > Ramadhan Himejima • 2 months ago

techiediaries.com Mod > Yoga Raihan Mahendra • 2 months ago

What is an Angular 6|7 Workspace? Angular 7|6 Course: Nested Router-Outlet,

Copyright © 2019 Techiediaries x

S-ar putea să vă placă și