Angular Routing Example

Angular Routing Example – In this article i have to share how to create angular 8 form routing in normal registration form using the Visual Studio Editor. Angular routing is the big concept because its generate the user path clickable link for end users. In HTML we use a href for create the link but in angular we use Routing concept (routerLink) used for create the link from one page to another page.

Angular (version 8) is very powerful front-end framework and its very easy also when you have good knowledge about HTML, CSS and JavaScript (or) Type Script program. JavaScript is main which is fill the most area for development areas.

Angular Routing

To enable the routing concept in our project first we import the routing modules in the typescript file. Then only we can access the router link. I think you already know the angular project structure so here I have directly explain the code. Without routing concept we cant implement or develop the project so that’s very important to learn and do the steps. Once you can do that then we can easily set the router for every applications.

Create New Project

When you have create new project in Terminal, its ask for RoutingModule file in your code. If you type yes then the routing module file be automatically imported from your project. The code for app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

After that open the app.module,ts file and add the following below code for set the router.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { Routes, RouterModule } from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { OneComponent } from './one/one.component';
import { StudentComponent } from './student/student.component';
const routes: Routes = [
  {path:'one',component:OneComponent},
  {path:'two',component:StudentComponent}
];
@NgModule({
  declarations: [
    AppComponent,
    OneComponent,
    StudentComponent
  ],
  imports: [
    BrowserModule,AppRoutingModule,BrowserAnimationsModule,
  RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Create Components

In this project i will create Two components, The name is One Component and another one is Student Component. In above app.module.ts code already i have import the two components. So you also create two components using the command of ng g c one & ng g c student. After creating the component just open the main file of app.component.html file and add the following below code.

Also Read – Android Studio Apps Source Code