how to refresh page in angular 2

Question

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     lt li routerLinkActive  active  gt  lt a routerLink  categories  gt  lt p gt Products Categories lt  p gt  lt  a gt  lt  li gt    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    lt div gt       lt div  ngIf   isChildProductClicked  else notClicked   gt          lt app-admin-products  productId   received  event   gt  lt  app-admin-products gt       lt  div gt       lt ng-template  notClicked gt  lt app-child-products  selProdIndex  productIndex gt  lt  app-child-products gt  lt  ng-template gt   lt  div gt

User · Answer

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 · Answer

window location reload   or just location reload

User · Answer

If you want to reload the page   you can easily go to your component then do    location reload

User · Answer

Updated   How to implement page refresh in Angular 2  note this is done within your component    location reload

User · Answer

Without a bit more code     its hard to say what s going on   But if your code looks something like this    lt li routerLinkActive  active  gt     lt a  routerLink    categories  gt  lt p gt Products Categories lt  p gt  lt  a gt   lt  li gt       lt router-outlet gt  lt  router-outlet gt   lt myComponentA gt  lt  myComponentA gt   lt myComponentB gt  lt  myComponentB gt    Then clicking on the router link will route to the categories route and display its template in the router outlet   Hiding and showing the child components don t affect what is displayed in the router outlet   So if you click the link again  the categories route is already displayed in the router outlet and it won t display re-initialize again   If you could be a bit more specific about what you are trying to do  we could provide more specific suggestions for you   -

User · Answer

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     gt         window location reload           100

[angular] how to refresh page in angular 2

Examples related to angular

Examples related to angular-ui-router