Ionic 5: How to refresh current page

Question

I need to refresh home page after successful login authentication. Here, i am using below code for moving to next page after successful login and used Firebase for back-end.

this.router.navigate(['home']);

It just opening home page without refreshing. welcome, if anyone can give me a solution.

Answer 1

You can use BehaviorSubject . In this way you will be able to get that information in any component without the need to refresh the entire page/screen.

1.) Create service. For example data.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class DataService {

  private messageSource = new BehaviorSubject('');
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(message: string) {
    this.messageSource.next(message)
  }

}

1.1.) Import that service inside app.module.ts

import { DataService } from './services/data.service';

providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    ...
    DataService
  ],

2.) On your login page, login.page.ts , set username

import { DataService } from '../services/data.service';

let username: string;

constructor(private _dataService: DataService) {...

this._dataService.changeMessage(this.username);

3.) On your home page, home.page.ts , you will access that info

import { DataService } from '../services/data.service';

let username: string;

constructor(private _dataService: DataService) {...

this._dataService.currentMessage.subscribe((message) => {
     if(message){
        this.username = message;
     }
});