In this tutorial we will learn about Angular Routing, Angular Routing is one of the important functionality in angular, it makes navigation faster.
Routing is a component in angular which is used for navigation in the application to navigate from one view to the other.
Steps to implement routing in your angular application
Step 1: add base tag
<base href="/">Step 2: create or there already exist a routing module
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }2 most important things to note here:
- create a routes constant array
- In the imports add the RouterModule.forRoot(routes)
Step 3: In the src/app/app.module.ts add import
import { AppRoutingModule } from './app-routing.module';and add it in the Module imports as well
@NgModule({
declarations: [
...
],
imports: [
BrowserModule,
AppRoutingModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})Step 4: The router-outlet tag in app.component.html
<router-outlet></router-outlet>The < router-outlet > tells the router where to display routed views.
The RouterOutlet is one of the router directives that became available to the AppComponent because AppModule imports AppRoutingModule which exported RouterModule.
Step 5: Add the anchor tags with routerLink and routerLinkActive directives to make the routing functional. Add this anchor tags in the page from where you want to access any other view.
<a routerLink=”/contact-form”></a>Lets Understand with an Example
In this example we will be able to Add routes and open a contact form :
- ON – click of a button &
- ON – accessing the link directly in browser
Step 1: Lets create a component called contact component
>ng g c contact
In contact.component.html file add the below html for creating a simple contact form
<p>
contact works!
</p>
<div class="col-lg-4" >
<form [formGroup]="contactForm" (ngSubmit)="onSubmit()" class="form-horizontal">
<h3 class="panel-title">Contact Form</h3>
<div class="form-group">
<label>Name</label>
<input id="name" formControlName="name" type="text" class="form-control">
</div>
<div class="form-group">
<label>Email</label>
<input id="email" formControlName="email" type="text" class="form-control">
</div>
<div>
<button type="submit" class="btn-primary">Submit</button>
</div>
</form>
</div>Step 2: create a constant of path in AppRoutingModule & also import the ContactComponent
Below is the code of AppRoutingModule
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ContactComponent } from './contact/contact.component';
const routes: Routes = [
{
path : 'contact-form', component : ContactComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }Step 3: add anchor tag in app.component.html to call the contact form page
add the below html block in app.component.html page, you can add it anywhere in this file.
<div style="text-align: center">
<button><a routerLink="contact-form" >Click to open form</a></button>
</div>
<hr>Step 4: OUTPUT view of the page
Open url localhost:4200 , you will see this page below
Now, Click on the button “Click to open form” as shown in the above snapshot, Or directly open the url “localhost:4200/contact-form” this will open the contact form page as shown below in the snapshot.
Summary
You are now good to go with Routing in angular, here we created a simple contact form page which we called on click of a button. Benefit of using angular routing is that it makes the navigation faster, simpler within the application in between different views or pages without refreshing the entire page.
Hope you liked it!
