How to achieve routing in Angular
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.
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 {}
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 {}
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 }];
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]})
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 {}
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 {
}