How to set routing in angular 6

How to set routing in angular 6

The Angular Router ("the router") borrows from this model. It can interpret a browser URL as an instruction to navigate to a client-generated view. It can pass optional parameters along to the supporting view component that help it decide what specific content to present, and set routing in angular 6 


How to set routing in angular 6





<base href="/">



Router imports

How to set routing in angular 6




The Angular Router is an optional service that presents a particular component view for a given URL. It is not part of the Angular core. It is in its own library package, @angular/router. Import what you need from it as you would from any other Angular package.

import { RouterModule, Routes } from '@angular/router';




Configuration 

How to set routing in angular 6

A router has no routes until you configure it. The following example creates five route definitions, configures the router via the RouterModule.forRoot method, and adds the result to the AppModule's imports array.

const appRoutes: Routes = [
  { path: '/home', component: homeComponent },
  { path: '/about',      component: aboutComponent },
  {
    path: 'heroes',
    component: HeroListComponent,
    data: { title: 'Heroes List' }
  },
  { path: '',
    redirectTo: '/heroes',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];


@NgModule({

  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
    // other imports here
  ],
  ...
})

export class AppModule { }


Follow On Social Media -

Follow on Facebook   -  https://www.facebook.com/Front-End-Issue-487743404963344
Follow on instagram   -  https://www.instagram.com/frontendissue/  
Follow on Twitter       -  https://twitter.com/IssueEnd
Follow on Linkedin     -  https://www.linkedin.com/in/hitesh-patidar-34253a10a/ 
Follow on GooglePlus -  https://plus.google.com/118238268171156252992
Follow on pinterest    -  https://in.pinterest.com/frontendissue/



Comments

Post a Comment

Popular posts from this blog

Owl carousel center mode with zoom image

Add (+/-) Button Number Incrementers using jQuery

What is difference between click and onclick in jquery