how to refresh page in angular 2

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>

Related Posts:

  1. Could not find module “@angular-devkit/build-angular”
  2. Difference between Constructor and ngOnInit
  3. AngularJS vs Angular [closed]
  4. When to use ‘npm start’ and when to use ‘ng serve’?
  5. Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’
  6. ExpressionChangedAfterItHasBeenCheckedError Explained
  7. Angular 10 – can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’
  8. How to use *ngIf else?
  9. ngFor with index as value in attribute
  10. How to upgrade Angular CLI to the latest version
  11. What is pipe for in RxJS?
  12. Angular: Get current index in ngFor
  13. What is .subscribe in Angular?
  14. BehaviorSubject vs Observable?
  15. Angular 6 “Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.”
  16. ERR_INVALID_HTTP_RESPONSE using Angular 7 and ASP.Net Core 2.2 in Google Chrome browser
  17. What is the difference between Promises and Observables?
  18. mat-form-field must contain a MatFormFieldControl
  19. formSelect() method in materialize does’nt work in angular 6 inputs
  20. ERROR Error: No value accessor for form control with unspecified name attribute on switch
  21. form control error:ERROR Error: No value accessor for form control with unspecified name attribute
  22. You seem to not be depending on “@angular/core” and/or “rxjs”. This is an error
  23. ‘ng’ is not recognized as an internal or external command, operable program or batch file
  24. Kendo Angular Chart change legend position based on size
  25. Unexpected value ‘undefined’ declared by the module ‘AppModule’
  26. Where to place/find the systemjs.config.js file in an angularJS2 project?
  27. ng serve does not work
  28. What is the equivalent of ngShow and ngHide in Angular 2+?
  29. document.getElementById replacement in angular4 / typescript?
  30. TS1086: An accessor cannot be declared in ambient context
  31. Property ‘map’ does not exist on type ‘Observable‘
  32. Angular2 Error: There is no directive with “exportAs” set to “ngForm”
  33. ‘router-outlet’ is not a known element
  34. Angular 2 Cannot read property ‘config’ of null
  35. Error when trying to inject a service into an angular component “EXCEPTION: Can’t resolve all parameters for component”, why?
  36. Set focus on element
  37. Cleanest way to reset forms
  38. Angular2 CLI error “@angular/compiler-cli” package was not properly installed
  39. Angular2 – How to create a simple table
  40. No provider for HttpClient
  41. Angular material Could not find Angular Material core theme
  42. Angular EXCEPTION: No provider for Http
  43. Error : Cannot find primary outlet to load
  44. cannot find module ‘@angular/http’?
  45. Templating with href in angular (4)
  46. How to implement sleep function in TypeScript?
  47. File Upload In Angular?
  48. is there any alternative for ng-disabled in angular2?
  49. Angular 2.0 and Modal Dialog
  50. Cannot find module ‘@angular/compiler’
  51. Implement session storage in an Angular 8 application
  52. Angular 2 [hidden] does not seem to be working?
  53. Local workspace file (‘angular.json’) could not be found. But same code works in another computer
  54. Can’t bind to ‘routerLink’ since it isn’t a known property
  55. How to use bootstrap 4 in angular 2?
  56. You have to be inside an angular-cli project in order to use the serve command
  57. How to get current route
  58. Angular4 core.es5.js Uncaught reflect-metadata shim is required when using class decorators
  59. Angular error: Please add a @NgModule annotation
  60. How to enable production mode?
  61. Angular 5: “No provider for ControlContainer”
  62. Getting No provider for NgControl Error after adding ReactiveFormsModule to my angular 4 app
  63. How to use `trackBy` with `ngFor`
  64. Angular routerLink does not navigate to the corresponding component
  65. How to use jQuery with Angular?
  66. Mask for an Input to allow phone numbers?
  67. What is the best way to delete a component with CLI
  68. GET http://localhost:4200/null 404 (Not Found) in angular2 with angular-cli
  69. Angular design pattern: MVC, MVVM or MV*?
  70. Module has no exported member error in angular module
  71. Check if Variable is Empty – Angular 2
  72. Angular 2 multiple modules
  73. Electron – Not allowed to load local resource
  74. How to apply filters to *ngFor?
  75. Select default option value from typescript angular 6
  76. angular-cli where is webpack.config.js file – new angular6 does not support ng eject
  77. Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’
  78. Angular: conditional class with *ngClass
  79. Can not find module “@angular-devkit/build-angular”
  80. Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’
  81. Missing write access in mac to /usr/local/lib/node_modules
  82. Angular map. What is it?
  83. VSCode cannot find module ‘@angular/core’ or any other modules
  84. Cannot find module ‘@angular-devkit/core’
  85. Unable to resolve dependency tree error when installing npm packages
  86. Angular ForEach in Angular4/Typescript?
  87. Angular 4 setting selected option in Dropdown
  88. Angular4 – No value accessor for form control
  89. I get “Http failure response for (unknown url): 0 Unknown Error” instead of actual error message in Angular
  90. npm WARN … requires a peer of … but none is installed. You must install peer dependencies yourself
  91. Module not found: Error: Can’t resolve ‘fs’ in
  92. How to fix Cannot find module ‘typescript’ in Angular 4?
  93. Binding select element to object in Angular
  94. How to $state.go()
  95. How to set Angular 4 background image?
  96. Crop the image using JavaScript
  97. How to use date picker in Angular 2?
  98. Angular 2 Hover event
  99. Angular2 – Http POST request parameters
  100. Using Angular 2 without TypeScript Transpiler

Leave a Comment