Angular Routing

What is Angular Routing

We are sure that you’ve seen that the URL of the application that you’re utilizing changes each time you click on a connection on the UI. This is on the grounds that you’re exploring all through the application, and it accomplishes this with the assistance of a typical system called Routing.

In a solitary page application, you change what the client sees by appearing or concealing segments of the showcase that relate to specific segments, instead of going out to the worker to get another page. As clients perform application errands, they need to move between the various perspectives that you have characterized.

Routing allows you to display specific views of your application depending on the URL path. To add this functionality to your sample application, you need to update the app.module.ts file to use the module, RouterModule. You import this module from @angular/router.

app.module.ts file looks like this

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';

import { HomeComponent } from './home/home.component';

import { AboutComponent } from './about/about.component';

@NgModule({

  declarations: [

    AppComponent,

    HomeComponent,

    AboutComponent,

  ],

  imports: [

    BrowserModule, RouterModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule {

The Angular Router enables navigation from one view to the next as users perform application tasks

Angular Modules

Angular Components

Angular Event Binding

Angular Routing

To begin with, we need to import the routing module inside our app.module.ts file.

// app.module.ts import { RouterModule } from '@angular/router'; imports: [ BrowserModule, RouterModule ],

The next part of the file is where you configure your routes. Routes tell the Router which view to display when a user clicks a link or pastes a URL into the browser address bar.

const routes: Routes = [ { path: 'demo', component: DemoComponent } ];
// routerConfig.ts

import { Routes } from '@angular/router';

import { HomeComponent } from './components/home/home.component';

import { AboutComponent } from './components/about/about.component';

const appRoutes: Routes = [

  { path: 'home',

    component: HomeComponent 

  },

  {

    path: 'about',

    component: AboutComponent

  },

];

export default appRoutes;

We have defined one array and inside that array, we have registered the different routes with their components. Finally, we have exported it.

Now, import this object inside app.module.ts and register the module.

// app.module.ts import appRoutes from './routerConfig'; imports: [ BrowserModule, RouterModule.forRoot(appRoutes) ],

In the app.component.html file, write the following code.

// app.component.html

<div style="text-align:center">

  <h1>

    Welcome to {{title}}!!

  </h1>

    <a routerLink="home" routerLinkActive="active">Home</a>

    <a routerLink="about">About</a>

  <router-outlet></router-outlet>

</div>

Now, we have already changed the title inside app.component.ts file.

// app.component.ts title = 'Angular Router Tutorial';

Start the app by the following command.

ng serve --open