Angular routing, A Complete Guide To Routing In Angular

Angular Routing is a default feature of the application. In this tutorial we will learn about Angular routing.

Introducing Angular Router

Angular Router is a powerful JavaScript router built and maintained by the Angular core team that can be installed from the @angular/router package. It provides a complete routing library with the possibility to have multiple router outlets, different path matching strategies, easy access to route parameters and route guards to protect components from unauthorized access.

The Angular router is a core part of the Angular platform. It enables developers to build Single Page Applications with multiple views and allow navigation between these views.

Step 1 – Create Routing File

Our first setup is to create routing file named “app-routing.module.ts”, where you will put all your route.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

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

Step 2 – Import routing module

Next, We will import above created file in the ‘app.module.ts’ file

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

Step 3 – Create two components

Now we will create two component. One component for one route. run below command to create components

ng g component firstPage
ng g component secondPage

Step 4 – Create route and attach the component

Next, We will create two route and attach component on it. So when user navigate the route he / she will see the separate component. Open “app-routing.module.ts” file.

Import our components

import { FirstPageComponent } from './first-page/first-page.component';
import { SecondPageComponent } from './second-page/second-page.component';

Next, Create route like this

const routes: Routes = [
    {
        path: 'first-page',
        component: FirstPageComponent
    },
    {
        path: 'second-page',
        component: SecondPageComponent
    }
];

After update our file will look like this

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FirstPageComponent } from './first-page/first-page.component';
import { SecondPageComponent } from './second-page/second-page.component';

const routes: Routes = [
    {
        path: 'first-page',
        component: FirstPageComponent
    },
    {
        path: 'second-page',
        component: SecondPageComponent
    }
];

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

Step 5 – Add router-outlet

Now, we need the above component to be displayed whenever required or clicked from the main module. For this, we need to add the router details in the app.component.html.


<br/>

<a routerLink = "first-page">First Page</a> | 
<a routerLink = "second-page">Second Page</a>

<br />
<br/>
<router-outlet></router-outlet>

In the above code, we have created the anchor link tag and given routerLink as “first-page” and “second-page” . This is referred in app-routing.module.ts as the path.

When a user clicks on  “first-page” or “second-page” , the page should display the content. For this, we need the following tag – <router-outlet> </router-outlet>.

The above tag ensures that the content in the first-page.component.html or second-page.component.html will be displayed on the page when a user clicks on  “first-page” or “second-page”

Let see how the output is displayed on the browser.

Recommended Posts

Angular Guard

5 Comments

  1. online said:

    Pretty! This has been an incredibly wonderful article. Thanks for supplying this info. Clary Nicolas Debor

    December 10, 2020
    Reply
  2. filmi full izle said:

    Good post! We will be linking to this great post on our website. Keep up the good writing. Beverlee Hayward Anderegg

    January 17, 2021
    Reply
  3. filmi izle said:

    Hi there friends, its impressive piece of writing regarding educationand fully explained, keep it up all the time. Carol-Jean Branden Alessandra

    January 18, 2021
    Reply
  4. filmi izle said:

    This post will help the internet viewers for setting up new blog or even a blog from start to end. Evita Caryl Andel

    January 18, 2021
    Reply
  5. free porn said:

    I think that is one of the such a lot vital info for me. Abbey Davidde Kamin

    January 21, 2021
    Reply

Leave a Reply

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