In this article, you will learn to use routing in angular. Routing is one of the important concepts in angular and is very useful for navigation. To create navigation in angular you have to use an angular router. In angular, pages are different components and by using angular-router you can navigate between them.
As angular is a single-page application framework while navigating from one page to another page, the page does not get refreshed. Only code related to navigated page gets loaded. This feature of angular helps to develop large-scale applications as the app gets loaded only once and different pages of the application get loaded based on user interaction using routing. This also helps to provide a good user experience as pages never get reloaded.
What is Angular Router?
The angular router is a package that is used for routing in angular. The angular router is maintained by the Angular team. Angular Router package gets automatically installed when you create a new project. This package is installed from the @angular/router. Angular Router is an important part of the Angular framework. Using Angular Router you can create Single Page Applications with multiples pages(views) and create navigation between them.
Follow below steps to implement routing in angular:
- Creating angular project
- Creating pages for navigation
- Creating Routes for components (pages)
- Run your project
Step 1: Creating Angular Project:
Create an angular project by using the following command:
ng new routing-in-angular
Step 2: Creating pages for navigation:
Now we will create two pages so that we can navigate between them.
Creating First Page:
To create the first page, create an about component using the following command:
ng g c about
Creating Second Page:
To create a second page, create a portfolio component using the following command:
ng g c portfolio
Step 3: Creating Routes for components (pages):
To create navigation for pages, you have to create routes for components. For creating routes, you have to create an array of objects and include properties like path and component name. RouterModule refers to the forRoot which takes an input of routes. You have to provide routes to the RouterModule.forRoot(). By doing this path will be assigned for the individual components.
Put the following code in the app-routing.module.ts file.
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutComponent } from './about/about.component';
import { PortfolioComponent } from './portfolio/portfolio.component';
const routes: Routes = [
{
path: 'about',
component: AboutComponent
},
{
path: 'portfolio',
component: PortfolioComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }Now we have to create links for about and portfolio components. To create links in angular, you have to use routerLink attribute which is provided by the angular-router package. You have to provide values of the path which we assigned for each component in the app-routing.module.ts file. By doing this, you can make connections of each component to links created. You have to also add a route for navigating to another page once you click on a link.
Put the following code in the app.component.html file to create links.
<div class="header">
<div class="site-name">
<h3><a routerLink='/'>Devconquer</a></h3>
</div>
<div class="links">
<a routerLink="about">About</a>
<a routerLink="portfolio">Portfolio</a>
</div>
</div>
<router-outlet></router-outlet>Put the following code in the app.component.css file to apply CSS styles.
.header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #575757;
color: white;
}
.site-name {
padding: 0px 12px;
}
.links {
padding: 0px 12px;
}
a {
padding: 12px;
cursor: pointer;
text-decoration: none;
color: white;
}Step 4: Run your project:
After completing the above steps, run your project using the following command and open the application in the browser.
ng serve
You will see the following output UI. The application gets navigated to the default path or path which is ‘/‘.
On-screen after clicking on the ‘About’ link, you will get navigated to http://localhost:4200/about URL. After clicking on the ‘About’ link path ‘/about’ gets appended to the original URL http://localhost:4200/. You will get the following output.
On-screen after clicking on the ‘Portfolio’ link, you will get navigated to http://localhost:4200/portfolio URL. After clicking on the ‘Portfolio’ link, path ‘/portfolio’ gets appended to the original URL http://localhost:4200/. You will get the following output.
UI gets changed after clicking on ‘About’ and ‘Portfolio’ links as their respective components get loaded.
Conclusion:
You learned the following points from this article:
- How to navigate from one page to other using angular-router.
- How to create routes and connect them to RouterModule.
- How to use routerLink attribute and assign path to it.
- Importance of routing in angular as it helps to navigate from one page another page without relaoding the application. This is useful for providing good user experience.
