How to generate component and define routings in Angular

 

Things we learned so far

How to set up environment

          How to create Angular project

 

Today we will understand how you can create component using Angular CLI and how you can define routing to each component.

You can run below command to generate the component using Angular CLI

CD <<folder where you want to have the component>> 

Run ng g c <<component name>>

   

ng g c <<component name>>

Angular CLI will create for files and also update the app.module.ts file by adding new entry to the import section.

Next we will create the component for home page.

ng g c home

Modules in Angular Project

Code in the app.module.ts file should be as below.

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

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

 

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

import { AppComponent } from './app.component';

import { LandingComponent } from './modules/landing/landing.component';

import { HomeComponent } from './modules/home/home.component';

 

@NgModule({

  declarations: [

    AppComponent,

    LandingComponent,

    HomeComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

    

    Next we can define routing in app.routing.module.ts file

    Update router array as below

    

const routes: Routes = [

    { path: '', component: LandingComponent }, 

    { path: 'landing', component: LandingComponent },             

    { path: 'home', component: HomeComponent }

];

If user type home in URL then it will load home page and if user type any other path or word landing it will load the landing page.

Let’s see new UIs of your application by running ng serve command.

Home page of Angular project

Landing page of Angular project

You can remove all the code in your app.component.html other than 

<router-outlet></router-outlet>

Router-outlet is used to load the component to browser which is corresponding to the defined routing path.

 

Good Luck! now you have created two new component and defined the routing for them.