CODEWITHSUNDEEP
angularangular-material
Bakterhaz
Bakterhaz

Reputation: 35

Angular sidenav seems to refresh on each link clicked

The initial view is a login component. Once the user logs in, they are redirected to "home" component. Home component has a top toolbar, along with a sidenav. The sidenav contains links the user can click on. When clicking the links, the sidenav seems to not fully complete the "highlight" animation, but seems to refresh the whole page. This is illustrated in the StackBlitz example, when clicking between the two links, you can see animation stops/refreshes. The initial view with button is setup to mimic the login redirect. Thanks for any input.

Link to StackBlitz https://stackblitz.com/edit/angular-ivy-bamdb4?file=src/app/home/home.component.html

Upvotes: 2

Views: 1390

Answers (1)

robert
robert

Reputation: 6142

The reason for this is that when you navigate you replace the entire page. You can easily debug this if you put a simple statement in home.component.ts file something like:

  ngOnInit() {
    console.log('jancsi ' + Math.random());
  }

if you open the Console each time you navigate, you will see new entry.

The way you setup the routing causes this as you have top level routes for: dashboard and userprofile

Try setting it up like this (true child routes of home) route:

  {
    path: 'home',
    component: HomeComponent,

    children: [
      {
        path: 'userprofile',
        component: UserProfileComponent
      },
      {
        path: 'dashboard',
        component: DashboardComponent
      }
    ]
  },

Also change the routerLink (remove the / slash) to look like this:

  <a mat-list-item routerLink="dashboard">First Component</a>
  <a mat-list-item routerLink="userprofile">Second Component</a>

animation will not be interrupted and there will be no new ngOnInit call on HomeComponent

Check this Stackblitz

Upvotes: 1

Related Questions