reload component angular 10 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: reload sub component angular
this.router.navigateByUrl('/RefreshComponent', { skipLocationChange: true }).then(() => {
this.router.navigate(['Your actualComponent']);
});
Example 3: how to make a component reload in angular
DeleteEmployee(id:number)
{
this.employeeService.deleteEmployee(id)
.subscribe(
(data) =>{
console.log(data);
this.ngOnInit();
}),
err => {
console.log("Error");
}
}
Example 4: 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);
}