I am going to share with you How you can work with Angular 7|8|9 Routing & Navigation in Latest Version. If you are looking for a simple definition for routing then it deals with navigating between pages. You have already been to several websites with links pointing to another page.
When you click on those links, you will be directed to a new page. You get it done with the help of routing. The pages that you refer will be in the form of components here.We are going to create components and see how we are going to achieve routing with it.
We are going to create a component right now and see how we are going to achieve routing with it.
ng g c home
ng g c about
Generate app routing module for navigation using below command
ng generate module app-routing --flat --module=app
Once the app-routing module is created then go to src > app > app-routing.modules.ts
file and add the given below code.
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// RouterModule & Routes activate routing service in Angular
import { RouterModule, Routes } from '@angular/router';
// Include components for which router service to be activated
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
// Routes array define component along with the path name for url
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent }
];
@NgModule({
imports: [
CommonModule,
RouterModule.forRoot(routes)
],
exports: [
RouterModule
],
declarations: []
})
export class AppRoutingModule { }
forRoot is referred by RouterModule. forRoot accepts inputs as an array. It also contains the object of the component and path. A class is named component and router is named path. We are referring to the components within the app-routing.module.ts
.
Go to src > app > app.modules.ts
and add the following code into app.module.ts
.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Components
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
// AppRoutingModule registered by Angular CLI
import { AppRoutingModule } from './/app-routing.module';
@NgModule({
declarations: [
AppComponent,
HomeComponent,
AboutComponent
],
imports: [
BrowserModule,
AppRoutingModule // Inject AppRoutingModule into imports array
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Now we are going to display the component’s data whenever the user clicks on Home and About link. We are going to using given below tags.
Go to app.component.html file and use the below code –
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="collapse navbar-collapse justify-content-center">
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link" routerLink="/home" routerLinkActive="active">
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/about" routerLinkActive="active">
About
</a>
</li>
</ul>
</div>
</nav>
<!--
Use "<router-outlet></router-outlet>" for navigating
between the components for which router service is activated.
-->
<div class="container text-center" style="padding: 30px 0">
<router-outlet></router-outlet>
</div>
i hope you like this article.
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
How to use the PHP Ternary Operator
If else condition is used to execute the...Get and Set HTML using jQuery html method
jQuery html() method allows you to get c...Laravel 8 Google Chart Example Tutorial
Google chart is simple, open-source and...How to Install VMware Workstation Player in Ubuntu
VMware Workstation Player is the desktop...How to find mouse position relative to an element using jQuery
Use the jQuery event.pageX and...