Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

routing
angular

How to achieve routing in Angular

Muhammad Ali Shahid

What is routing in Angular?

Routing means navigating between different pages. We have seen many websites that direct us to a new page with links. In Angular, it remains the same. Routing in Angular allows us to move from one part of the application to another part, or from one view to another view.

Let’s try to understand it with an example.

An example of routing

In the example shown above, the user’s request for Page 1 router gets the request and serves the user with Page 1. However, things don’t work like that in the backend. It’s a simple example to help us understand the routes.

Let’s get a better understanding of the routes. In a single-page application, we change what the user sees by showing and hiding parts of the display according to that specific component, rather than going out to the server to load a whole new page. It makes the Angular applications faster than usual applications.

Now that we have a basic understanding of what routing is, let’s take a look at how to achieve routing in Angular.

Components for routing

To achieve routing in Angular, we need to have at least two components to navigate from one component to the other. To create a component using CLI, we need to run the following commands.

ng generate component first
ng generate component second

first and second are the names of our components.

We can also create the First.component.ts and Second.component.ts files in the application’s folder.

We write the following code in the First.component.ts file:

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

@Component({
  selector: 'FirstComponent',
  template: `
   <h2>First Component</h2>
<router-outlet></router-outlet>
  `
})
export class FirstComponent {

}
The first.component.ts file

We write the following code in the Second.component.ts file:

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

@Component({
  selector: 'SecondCompnent',
  template: `
   <h2>Second Component</h2>
<router-outlet></router-outlet>
  `
})
export class SecondComponent {

}
Second.component.ts file

We import both components in app.routing.module.ts and define the path with the following code.

import { FirstComponent } from './First.component';
import { SecondComponent } from './Second.component';
const routes: Routes = [ 
  { path: 'first-component', component:FirstComponent },
  { path: 'second-component', component:SecondComponent }
  ];
app.routing.module.ts file

We import both components in app.module.ts and declare them.

import { FirstComponent } from './First.component';
import { SecondComponent } from './Second.component';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    FirstComponent, 
    SecondComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
app.module.ts file

In app.components.ts, we create two buttons and add routerLinks to them. For the routerLink to work, we have to add the router-outlet tag below.

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

@Component({
  selector: 'app-root',
  template: `
   <h1>Angular Router App</h1>
    <ul>
      <button routerLink = "/first-component">First Component</button>
      <button routerLink = "/second-component">Second Component</button>  
    </ul>
    <router-outlet></router-outlet>
  `
})
export class AppComponent {

}
The app.components.ts file

We have successfully achieved routing in Angular. We can see the working demo below.

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

@Component({
  selector: 'SecondCompnent',
  template: `
   <h2>Second Component</h2>
<router-outlet></router-outlet>
  `
})
export class SecondComponent {

}

RELATED TAGS

routing
angular

CONTRIBUTOR

Muhammad Ali Shahid
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring