how to refresh page in angular 2

user_2800089 0
Viewed 167096

I have created one router link as below. This router link loads ProductsStartComponent and then this component loads several other components using ngif and not via navigation. Since below Product categories link is visible in all pages so if I am clicking on this link after reaching to some component of ngif , this is not taking me back on ProductsStartComponent.

As I am new to Angular , my understanding for this behavior is because all values/models are set and that's why it's not navigating. I suppose this can be achieved by refresh or reload of page but how to achieve that. Please advise.

In admin.component.html, router Link is defined for clicking.
returns 

<li routerLinkActive="active"><a routerLink="categories"><p>Products Categories</p></a></li>

returns

In app-routing.module.ts, which component need to be loaded on clicking of router link

const appRoutes: Routes = [
{path: 'admin', component: AdminComponent, children: [
    { path: 'dashboard', component: AdminDashboardComponent },
    { path: 'sellers', component: AdminSellersComponent },
    { path: 'categories', component: ProductsStartComponent}
]}]

In product-start.component.html, this is being loaded on first click on router link. Now if I click on edit button and moved to other component and again if i click on product categories router link , nothing happen , I am expecting it to reset the page.

<div>
    <div *ngIf="!isChildProductClicked; else notClicked" >
       <app-admin-products (productId)="received($event)"></app-admin-products>
    </div>
    <ng-template #notClicked><app-child-products [selProdIndex]=productIndex></app-child-products></ng-template>
</div>
angular-ui-router angular
8 Answers

Just in case someone else encounters this problem. You need to call

window.location.reload()

And you cannot call this from a expression. If you want to call this from a click event you need to put this on a function:

(click)="realodPage()"

And simply define the function:

reloadPage() {
   window.location.reload();
}

If you are changing the route, it might not work because the click event seems to happen before the route changes. A very dirty solution is just to add a small delay

reloadPage() {
    setTimeout(()=>{
      window.location.reload();
    }, 100);
}
user_89191330

Updated

How to implement page refresh in Angular 2+ note this is done within your component: 

location.reload();
user_46983800

The simplest possible solution I found was:

In your markup:

<a [href]="location.path()">Reload</a>

and in your component typescript file:

constructor(
        private location: Location
  ) { }
user_47633090

After saving or any operation, I have used the following code for reload the page

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

user_21238530

window.location.reload() or just location.reload()

user_100045740

Inside ngOnInit we can use location.reload() to reload the page

ngOnInit() {
    let username = 'Tom';
    if (username !== false && username !== undefined && username !== '' && username !== 'undefined') {
      this.username = username.toUpperCase();
    } else {
      location.reload();
    }

}

user_46527060
Related