CODEWITHSUNDEEP
angular
Sky
Sky

Reputation: 79

Angular navigate to a sibling route?

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' }, }
];

Upvotes: 0

Views: 1297

Answers (3)

Sky
Sky

Reputation: 79

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

Upvotes: -1

Rishi
Rishi

Reputation: 11

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

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

Upvotes: 1

Joosep Parts
Joosep Parts

Reputation: 6235

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

Upvotes: 1

Related Questions