Angular navigate to a sibling route?

Question

How do I navigate from /login path to /monitor path using this.router.navigate? Similar question but doesn't work for me: How do I navigate to a sibling route? Thanks!


const routes: Routes = [
  {
    path: '', redirectTo: 'monitor', pathMatch: 'full',
  },
  {
    path: 'monitor',
    canActivate: [AuthGuard],
    children: [
      {
        path: '', redirectTo: 'dell', pathMatch: 'full'
      },
      {
        path: 'lenovo', component: lenovoMonitorComponent
      },
      {
        path: 'dell', component: dellMonitorComponent
      },
    ]
  },
  { path: 'login', component: LoginComponent, data: { title: 'Login' }, }
];

score 1 · Accepted Answer · answered Jan 27 '22 at 04:37

In html you would use routerLink as an relative url, e.g: <a routerLink="/bikes" routerLinkActive="active">Bikes</a> but in typescript you would need to add the url in navigate as a string enclosed by brackets.

@Component({
  selector: 'custom-attribute',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  constructor(private router: Router) {
  }

  ngOnInit() {
    this.goToPlaces();
  }

  goToPlaces(){
    setTimeout(() => {
      this.router.navigate(['/bikes'])
    }, 5000)
  }
}

Here is an working example for you: https://stackblitz.com/edit/angular-routing-navigation-example-zivqnx?file=app%2Fapp.component.ts

No reason to delay. Just to showcase, that it works after loading stackblitz demo. It works just as well without the setTimeout. — Joosep Parts, Jan 27 '22 at 07:05

score 1 · Answer 2 · edited Jan 27 '22 at 10:12

1

In your case after successful login, you can use the below code to navigate to the /monitor

this.router.navigate(['/monitor']);

edited Jan 27 '22 at 10:12

Elikill58

4,050
24
23
45

answered Jan 27 '22 at 05:25

Rishi

11
3

score -1 · Answer 3 · answered Jan 27 '22 at 20:12

-1

Turns out it is not a routing problem. The answer here How do I navigate to a sibling route? should work.

answered Jan 27 '22 at 20:12

Sky

79
1
8

Angular navigate to a sibling route?

3 Answers3