How to refresh page angular code example
Example 1: how to refresh page angular
refresh(): void {
window.location.reload();
}
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 page without reloading
this.router.navigate(['path/to'])
.then(() => {
window.location.reload();
});
Example 4: angular typescript refresh page
this.router.routeReuseStrategy.shouldReuseRoute = function(){
return false;
};
this.router.events.subscribe((evt) => {
if (evt instanceof NavigationEnd) {
this.router.navigated = false;
window.scrollTo(0, 0);
}
});
Example 5: angular 6 reload current page
import { DOCUMENT } from '@angular/common';
import { Component, Inject } from '@angular/core';
@Component({
selector: 'app-refresh-banner-notification',
templateUrl: './refresh-banner-notification.component.html',
styleUrls: ['./refresh-banner-notification.component.scss']
})
export class RefreshBannerNotificationComponent {
constructor(
@Inject(DOCUMENT) private _document: Document
) {}
refreshPage() {
this._document.defaultView.location.reload();
}
}
Example 6: angular refresh component without reloading page
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable()
export class DataSharingService {
public isUserLoggedIn: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
}
import { DataSharingService } from './data-sharing.service';
export class AppHeaderComponent {
isUserLoggedIn: boolean;
constructor(private dataSharingService: DataSharingService) {
this.dataSharingService.isUserLoggedIn.subscribe( value => {
this.isUserLoggedIn = value;
});
}
}
<button *ngIf="!isUserLoggedIn">Login</button>
<button *ngIf="isUserLoggedIn">Sign Out</button>
someMethodThatPerformsUserLogin() {
this.dataSharingService.isUserLoggedIn.next(true);
}