Angular Force Reload Component Code Example

Example 1: How to Reload a Component in Angular

reloadComponent() {   let currentUrl = this.router.url;       this.router.routeReuseStrategy.shouldReuseRoute = () => false;       this.router.onSameUrlNavigation = 'reload';       this.router.navigate([currentUrl]);   }

Example 2: refresh current component angular

reloadCurrentRoute() {     let currentUrl = this._router.url;     this._router.navigateByUrl('/', {skipLocationChange: true}).then(() => {         this._router.navigate([currentUrl]);         console.log(currentUrl);     });   }

Example 3: angular refresh component without reloading page

/*You can use a BehaviorSubject for communicating between different  components throughout the app.  You can define a data sharing service containing the BehaviorSubject to  which you can subscribe and emit changes.  Define a data sharing service */  import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs';  @Injectable() export class DataSharingService {     public isUserLoggedIn: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false); }  /*Add the DataSharingService in your AppModule providers entry.  Next, import the DataSharingService in your <app-header> and in the  component where you perform the sign-in operation. In <app-header>  subscribe to the changes to isUserLoggedIn subject: */  import { DataSharingService } from './data-sharing.service';  export class AppHeaderComponent {      // Define a variable to use for showing/hiding the Login button     isUserLoggedIn: boolean;      constructor(private dataSharingService: DataSharingService) {          // Subscribe here, this will automatically update          // "isUserLoggedIn" whenever a change to the subject is made.         this.dataSharingService.isUserLoggedIn.subscribe( value => {             this.isUserLoggedIn = value;         });     } }  /*In your <app-header> html template, you need to add the *ngIf  condition e.g.: */  <button *ngIf="!isUserLoggedIn">Login</button>  <button *ngIf="isUserLoggedIn">Sign Out</button>  // Finally, you just need to emit the event once the user has logged in e.g:  someMethodThatPerformsUserLogin() {     // Some code      // .....     // After the user has logged in, emit the behavior subject changes.     this.dataSharingService.isUserLoggedIn.next(true); }