Ionic 5: How to refresh current page

user_11752083 0
Viewed 1685

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.

ionic-framework angular firebase
1 Answers

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;
     }
});
user_50599160
Related