Angular 5 Route

Previously:

 

Now in this part we will be discussing about Angular 5 Route:

  • Create a component say “contact”
    • $ ng g c contact
  • Add the component to /src/app/app-routing.module.ts:
    • import { NgModule } from ‘@angular/core’;
      import { NgModule } from ‘@angular/core’;
      import { Routes, RouterModule } from ‘@angular/router’;import { HomeComponent } from ‘./home/home.component’;
      import { ContactComponent } from ‘./contact/contact.component’;

      const routes: Routes = [
      {
          path:”,
          component: HomeComponent
      },
      {
          path:’contact’,
          component: ContactComponent
      }];
      @NgModule(
      { imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]}
      )
      export class AppRoutingModule { }

       

  • Add an anchor tag in /src/app/home/home.component.html
    • <a routerLink=”contact”>Contact</a>
    • Here the routeLink helps to set the route to find the page with routing
  • Run the application using
    • $ ng serve
  • When the app starts browse on the browser click the “contact” anchor and the page will route to Contact page.

 

We will see the next thing about Angular 5 its service creation and use. Click Here

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s