/Javascript/AngularJS/Angular refresh component without reloading page

Angular refresh component without reloading page

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]);
  }

Angular refresh page without reloading

this.router.navigate(['path/to'])
  .then(() => {
    window.location.reload();
  });

Source: codegrepper.com

Refresh current component angular

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

Angular reload component

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

Source: stackoverflow.com

Refresh page angular

refresh(): void {
    window.location.reload();
}

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

Source: stackoverflow.com

Similar codes

-1 vote323 views2 answers
Activate router angular
Javascript AngularJS
0 vote361 views1 answer
Best way to filter table in angular
Javascript AngularJS
0 vote326 views1 answer
Percent pipe angular example
Javascript AngularJS
0 vote319 views1 answer
How to write a test case for dropdown selection change in angular 9
Javascript AngularJS
2 votes338 views2 answers
Angularjs 1.5.6 cdn
Javascript AngularJS
5 votes374 views3 answers
Angular formarray remove all
Javascript AngularJS
55 votes428 views2 answers
Angular start command
Javascript AngularJS
0 vote359 views1 answer
Angular convert boolean to yes no
Javascript AngularJS
1 vote327 views2 answers
Angular 8 to 9
Javascript AngularJS
0 vote370 views1 answer
Fontawesome icon size 1.5 angular
Javascript AngularJS