How to Refresh a Component in Angular
After some research and modifying my code as below, the script worked for me. I just added the condition:
this.router.navigateByUrl('/RefreshComponent', { skipLocationChange: true }).then(() => {
this.router.navigate(['Your actualComponent']);
});
Angular refresh component
You probally dont have RefreshComponent
route in you route configuration.
As far as refresing your component goes, just modify your function as follows, you don't need RefreshComponent
route.
Replace navigateByUrl('/RefreshComponent',...
with navigateByUrl('/',...
changeLocation(locationData) {
// save current route first
const currentRoute = this.router.url;
this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => {
this.router.navigate([currentRoute]); // navigate to same route
});
}
How to reload a page in Angular 8 the proper way
You can find total working example here in this StackBlitz Link
Update
First of all doing window.location.reload()
is totally against of Single-Page-Application nature. rather, You can reload particular component when actually clicking on that link.. so, to do this task we have angular router. For particular component reload you can push this line of code in main app.component.ts once for full application.
mySubscription;
constructor(private router: Router, private activatedRoute: ActivatedRoute){
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.mySubscription = this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
// Trick the Router into believing it's last link wasn't previously loaded
this.router.navigated = false;
}
});
}
above code we are going to subscribing
to router-events
. and then we are checking each and every router-NavigationEnd
event, then just telling router, forget to add current navigation of router to its own history. So, each time whenever we are trying to reload same component each and every events are firing for that particular component only, thats a SPA.
IN app.component.ts of ngOnDestroy()
we have to unsubscribe from router events, when component is destroyed.
ngOnDestroy(){
if (this.mySubscription) {
this.mySubscription.unsubscribe();
}
}
Now, for example you have Home and Details component or anything else of component... You can reload each component by calling this.router.navigate([this.router.url])
this will reload all current component. for example, In home component
we have reload-button
and click event of that we are just calling this.router.navigate([this.router.url])
. same for details component too.. or any other component..
Home.component.ts
reLoad(){
this.router.navigate([this.router.url])
}
Details.component.ts
reLoad(){
this.router.navigate([this.router.url])
}
You can check in updated above StackBlitz link, all working example of reloading with full router-state reloading. In browser console see each and every events of component is firing by clicking button reload()
.
How to auto refresh page/component view in angular
Try this:
ngOnInit(): void {
this.updateSubscription = timer(0, 120000).pipe(
switchMap(x => this.httpMarketData.getTableByType('Customer Table'))
).subscribe((response: TableData[]) => {
this.getTableData(response);
});
}
Explanation:
- Use
timer
instead ofinterval
- Use
switchMap
to switch to the http-observable after every delay.
How to refresh the same page after select option changes in another component using ionic?
This problem resolved using
window.location.reload();
Related Topics
How to Increment a Number After Every 1 Second Using JavaScript
How to Separate an Integer into Separate Digits in an Array in JavaScript
How to Use Fetch Within a For-Loop, Wait for Results and Then Console.Log It
How to Hide Blinking Cursor in Input Text
Text Input Allow Only Integer Input in Angularjs
How to Style Dynamically Created Elements With CSS
Innerhtml Inserts Only [Object Htmldivelement]
How to Append My Data in Nested Object
Splitting an Array of Objects by Property
How to Display Base64 Encoded Pdf
Regexp to Match Every Occurence After N Occurences
How to Detect If a Browser Is Blocking a Popup
Fullcalendar - Change View for Mobile Devices
Detect Click into Iframe Using JavaScript
Export Method/Function in React Native
Can We Have Code After Location.Reload(True)