Angular Routing is a default feature of the application. In this tutorial we will learn about Angular routing.
Introducing Angular Router
Angular Router is a powerful JavaScript router built and maintained by the Angular core team that can be installed from the @angular/router
package. It provides a complete routing library with the possibility to have multiple router outlets, different path matching strategies, easy access to route parameters and route guards to protect components from unauthorized access.
The Angular router is a core part of the Angular platform. It enables developers to build Single Page Applications with multiple views and allow navigation between these views.
Step 1 – Create Routing File
Our first setup is to create routing file named “app-routing.module.ts”, where you will put all your route.
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = []; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
Step 2 – Import routing module
Next, We will import above created file in the ‘app.module.ts’ file
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Step 3 – Create two components
Now we will create two component. One component for one route. run below command to create components
ng g component firstPage ng g component secondPage
Step 4 – Create route and attach the component
Next, We will create two route and attach component on it. So when user navigate the route he / she will see the separate component. Open “app-routing.module.ts” file.
Import our components
import { FirstPageComponent } from './first-page/first-page.component'; import { SecondPageComponent } from './second-page/second-page.component';
Next, Create route like this
const routes: Routes = [ { path: 'first-page', component: FirstPageComponent }, { path: 'second-page', component: SecondPageComponent } ];
After update our file will look like this
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { FirstPageComponent } from './first-page/first-page.component'; import { SecondPageComponent } from './second-page/second-page.component'; const routes: Routes = [ { path: 'first-page', component: FirstPageComponent }, { path: 'second-page', component: SecondPageComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AdminRoutingModule { }
Step 5 – Add router-outlet
Now, we need the above component to be displayed whenever required or clicked from the main module. For this, we need to add the router details in the app.component.html.
<br/> <a routerLink = "first-page">First Page</a> | <a routerLink = "second-page">Second Page</a> <br /> <br/> <router-outlet></router-outlet>
In the above code, we have created the anchor link tag and given routerLink as “first-page” and “second-page” . This is referred in app-routing.module.ts as the path.
When a user clicks on “first-page” or “second-page” , the page should display the content. For this, we need the following tag – <router-outlet> </router-outlet>.
The above tag ensures that the content in the first-page.component.html or second-page.component.html will be displayed on the page when a user clicks on “first-page” or “second-page”
Let see how the output is displayed on the browser.

Pretty! This has been an incredibly wonderful article. Thanks for supplying this info. Clary Nicolas Debor
Good post! We will be linking to this great post on our website. Keep up the good writing. Beverlee Hayward Anderegg
Hi there friends, its impressive piece of writing regarding educationand fully explained, keep it up all the time. Carol-Jean Branden Alessandra
This post will help the internet viewers for setting up new blog or even a blog from start to end. Evita Caryl Andel
I think that is one of the such a lot vital info for me. Abbey Davidde Kamin