Angular routing tutorial; in this comprehensive example, we would like to share with you how to create routes in the angular application and enable navigation in the angular app.
At the end of this quick tutorial, you will throughly understand how to navigate from one component to another component using an angular routing mechanism.
Ideally, in SPA (single page application), you don’t refresh the whole page by making a request to the server. Instead, you simply update the specific chunk or component that needs to be displayed to the user.
Hence, theoretically, to perform a particular action user needs to travel between components that are known views in simple terms.
To redirect from one component to another component, we need to enable the navigation. We take Angular router’s help to redirect to another component; a router in angular facilitates navigation by defining a URL that can be used by browsers to make the user transverse through the application.
Angular 13 Routing Navigation Example
- Step 1: Create Angular App
- Step 2: Generate Angular Components
- Step 3: Create Routes in Angular
- Step 4: Redirect to Components in Angular
- Step 5: Create Angular Wildcard Routes
- Step 6: Start Development Server
Create Angular App
You must have node npm configured on your syste, once both the tools installed properly, then run command to install angular CLI tool:
npm install -g @angular/cli
Further, use the command on the terminal to create a new basic angular app.
ng new angular-routing-example
Make sure to choose yes related to the following question:
Would you like to add Angular routing? Yes
Plus, don’t foreget to enter into the project folder:
cd angular-routing-example
Disable Strict Angular TypeStrict Errors
The latest version of Angular comes with strict mode, you have to manually disable the strict mode you can set “strict”: false
, "noImplicitReturns": false
and "strictTemplates": false
inside the compilerOptions and angularCompilerOptions in tsconfig.json file.
Generate Angular Components
We need some components so that we can create routes for associated component, likewise head over to console and execute the command to generate a handful of components:
ng generate component dashboard
ng generate component profile
ng generate component checkout
Create Routes in Angular
At the time of app installation, angular cli asked, “Would you like to add Angular routing?” and we chose yes, due to which we have got the src/app-routing.module.ts file, hence move inside the file.
Inside here, we will create angular routes for every component that needs to be displayed in the view.
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ProfileComponent } from './profile/profile.component';
import { CheckoutComponent } from './checkout/checkout.component';
const routes: Routes = [
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'profile', component: ProfileComponent },
{ path: 'checkout', component: CheckoutComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Redirect to Components in Angular
Add the following code in the angular HTML template, this code will enable the navigation in angular, and by clicking on the individual link, it will display the content associated with a particular component.
<nav>
<ul>
<li><a routerLink="/dashboard" routerLinkActive="active">Dashboard</a></li>
<li><a routerLink="/profile" routerLinkActive="active">Profile</a></li>
<li><a routerLink="/checkout" routerLinkActive="active">Checkout</a></li>
</ul>
<nav>
<router-outlet></router-outlet>
The routerLink
directive takes the route name that we defined in the AppRoutingModule; on top of that, routerLinkActive
adds the active class to the currently activated component through the angular router.
The router-outlet
directive displays the component’s content when the user navigates to the related component.
Create Angular Wildcard Routes
In the next step, we learn to create Wildcard Routes in the Angular app.
For instance, we have defined three routes in our angular app, but somehow if you enter an undefined route or URL on the browser, then the angular app throws the error.
Wildcard routes solve this problem, and if no matching routes or link are found, then it will redirect to pre-defined or wild card route in the angular app using angular routes mechanism.
Open app-routing.module.ts file and update the following code:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ProfileComponent } from './profile/profile.component';
import { CheckoutComponent } from './checkout/checkout.component';
const routes: Routes = [
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'profile', component: ProfileComponent },
{ path: 'checkout', component: CheckoutComponent },
{ path: '**', component: DashboardComponent } // Wildcard Route
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Here is the list of valid routes we created so far:
http://localhost:4200/dashboard
http://localhost:4200/profile
http://localhost:4200/checkout
Now, if you use wrong url:
http://localhost:4200/10sd0f0
Then you will see wildcard route will redirect you to dashboard component and load in the view.
Start Development Server
Next, use command to start the angular application:
ng serve --o
Conclusion
This angular routing tutorial is over; in this example, we learned how to create routes in angular using angular routing.
We have discovered how to redirect to another component, add an active class in angular routes, and additionally, we learn how to create or add wildcard routes in angular.