Home Page

 
Just like the authentication page, the home page is taken from my previous example. The only real difference is me showing a welcoming message to the authenticated user.
 
home.page.html
 
<ion-header>
  <ion-toolbar>
    <ion-title>Home Page</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
	<ion-card *ngIf="user">
		<ion-card-header>
			<ion-card-subtitle>Welcome:</ion-card-subtitle>
			<ion-card-title >{{user.firstName}} {{user.lastName}}</ion-card-title>
		</ion-card-header>
	</ion-card>	
	<ion-button expand="block" size="large" type="reset" (click)="logout()">Logout</ion-button> 
</ion-content>
 
home.page.ts
 
import { Component, OnInit } from '@angular/core';

import { AuthService } from '../../services/auth.service';
import { User } from '../../models/user';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {

    private user: User;

	constructor(private authService: AuthService) { }

	ngOnInit() {
		this.user = this.authService.currentUserValue;
	}

    logout() {
    	this.authService.logout();
    }    

}
 

Deployment

 
As this is a browser-only example we can test it in our browser:
 
ionic serve
 
Of course, you can also test it using your Andriod smartphone:
 
ionic build android
ionic run android
 

Download The Code

 
Working example with step-by-step tutorial can be found here:
 
GitHub
 
 

Here's a Way You Can Support Us And It’s Free

If this article helped you here’s one thing you can do for me. While writing articles I’m using Notion tool for information gathering. It’s a modern alternative to Evernote. If you use Evernote or any similar application give also a chance to Notion. By signing up, you will get access to a very powerful tool, give me one more premium month, and in turn help me to write future articles.
 

More Ionic 4 Tutorials