Igor Simic
3 years ago

Angular - reload component on route param change


In Angular we can very easy reload the same route if (for example) route param has changed. For example, if we have a path for user profile:
profile/:user
every time when :user is changed we want to reload the component and load new data for that user. How to achieve that?

Here is how:

Create route

1. Create Angular route with route param:
{
  path: ':slug',
  component: ProfileComponent,
},

2. In your ProfileComponent add Router and set routeReuseStrategy.shouldReuseRoute to false
constructor(
  public router: Router
) { }

ngOnInit(): void {

  this.router.routeReuseStrategy.shouldReuseRoute = () => false;

}

Now, if we have link to user profile:
<button mat-menu-item [routerLink]="['/profile/'+ data.user.slug]">Profile</button>
it will work correctly