The routed feature module contains the features related to routing and related functionality. The routes defines the array of routes for an application. It is easy to update dynamically in an application whenever required as it is an array. ie. when lazy loaded module want to add new routes using forChild() method, it will be added into the existing routes list or array.
1 import { NgModule } from '@angular/core';
2 import { RouterModule, Routes } from '@angular/router';
3 import { ChildComponent } from './components/child.component';
4 import { DetailComponent } from './components/details/detail.component';
5
6 const routes: Routes = [
7 { path: 'child', component: ChildComponent },
8 { path: 'detail', component: DetailComponent }
9 ];
10
11 @NgModule({
12
13 imports: [RouterModule.forRoot(routes)],
14 exports: [RouterModule]
15 })
16 export class AppRoutingModule { }
17
In the above example, a routes array is define by assigning an object of Route by specifying a path and component properties. A path specifies a route url and component specifies a component to be render when specified url is opened on browser. A component render on template where router-outlet tag specified in the template.
Register routing module in root module
1 import { NgModule } from '@angular/core';
2 import { BrowserModule } from '@angular/platform-browser';
3 import { AppRoutingModule } from './app-routing.module';
4 import { AppComponent } from './app.component';
5 import { ChildComponent } from './components/child.component';
6 import { DetailComponent } from './components/details/detail.component';
7
8 @NgModule({
9 declarations: [
10 AppComponent,
11 ChildComponent,
12 DetailComponent
13 ],
14 imports: [
15 BrowserModule,
16
17 AppRoutingModule
18 ],
19 providers: [],
20 bootstrap: [AppComponent]
21 })
22 export class AppModule { }
23
In the above example, forRoot() method is used to import all routes and registering routes. If forChild() method of RouterModule is used, it will throw an error NullInjectorError: No provider for Router!, to fix this error. The Router must be register in the application by using forRoot() method.
1 <h1> Angular routing </h1>
2
3 <a href="#" (click)="navigate()"> Open child component </a>
4
5 <router-outlet></router-outlet>
In the above template, a link element is added that bind with click event. When user click on link, it navigate to specified route. An element router-outlet specify a position where a routed component will be render on browser.
1 import { Component } from "@angular/core";
2 import { Router } from "@angular/router";
3
4 @Component({
5 selector: 'app-root',
6 templateUrl: './app.component.html',
7 styleUrls: ['./app.component.less']
8 })
9
10 export class AppComponent {
11
12
13 constructor(private router: Router) { }
14
15 navigate() {
16 this.router.navigate(['child']);
17 }
18
19 navigateByUrl() {
20 this.router.navigateByUrl('/detail');
21 }
22 }
In the above example, a Router object is injected in App.component in the constructor. A navigate() method call navigate() method that takes array of routes. If specified array includes multiple elements, it represents a nested routes. It navigates to specified routes and respective component will be render on browser. A navigateByUrl() navigates to specified url.
Note : In the above example, we have bind click event with component method but if you have to specify routerLink directive, it allows to open specified route from template itself.
Related options for your search