Angular Routes

In this article, we’re going to learn about Routing and Navigation in Angular. Every angular app we build will definitely have various components with its own View. There should be a way to navigate between the views according to the user’s action. So for this, we’ve had an Angular Router to achieve this.

What is Angular Routing?

An angular router routes the user among various angular modules based on the path requested from the user. When a user requests a specific path in angular, the router module checks for the route and actives the specified module for that path.

Example

Suppose on the home page, i.e., localhost:4200, we have two sections, one to send a text to someone and another one is to send an email to someone as shown in the picture.

Angular routing architecture

Let’s see how we can navigate between this using Angular Router.

To navigate between the components, we have to follow some steps before that.

Step 1: Generate two components named text and email

NOTE: We’ve learned how to generate components in one of our previous articles. If not, check it out!!.

Step 2: Configure the routes

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {FormsModule} from '@angular/forms';
import { TextComponent } from './text/text.component';
import { EMailComponent } from './e-mail/e-mail.component';
import { AppComponent } from './app.component';

const routes: Routes = [
  {path:'text', component:TextComponent},
  {path:'email', component:EMailComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule,FormsModule]
})

export class AppRoutingModule { }
export const routingComponents = [TextComponent, EMailComponent]

This file contains a routing module for our app.

  • In const route, we’ll define all possible routes of our application.
  • Each route is an object which contains a path and components.
  • The “path” is reflected in the URL.
  • The “component” to render the content when we navigate to that corresponding path.
  • Create an array of all the routing components, then export it, and then import in the app.module.ts

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule, routingComponents } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    routingComponents
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }
  • Lastly, in the declarations array, add routingComponents.

And we’re done now. Every time we add a new component, we’ve to specify it into the app-routing.module.ts file.

Let’s write some code in the app.component.html to see the example that we used to understand routing at the beginning.

app.component.html

<div>
  <h2 routerLink="/text" routerLinkActive="active">DROP A TEXT</h2>
  <h2 routerLink="/email" routerLinkActive="active">DROP AN E-MAIL</h2>
</div>
<router-outlet></router-outlet>
  • We took two h2 tags; one is for text and another one for email.
  • The routerLink directive is used to specify the path to which we want to navigate.
  • The routerLinkActive directive specifies one or multiple CSS classes that will be applied when the selected link is active.

Output:

When we click on DROP A TEXT.

angular routing example 1

When we click on DROP AN E-MAIL.

angular routing example 2

NOTE: component-name works! It is the by default text which appears after generating a new component.

Conclusion

We hope this article will help you to clear your concepts on Routing and Navigation. Then, in some future articles, we’ll learn some other methods of Navigation between the components.

Read Next: Angular Wild-Card Routing

Leave a Reply

Your email address will not be published. Required fields are marked *