Angular 2 rout config

angular 2 router-link directive

Search Keywords :-

[Angular 2 router-link directive,  Angular 2 router-outlet directive,  Angular 2 rout config , Angular 2 Route Params]

For live example, go to plnkr http://embed.plnkr.co/vjf9Zz/


Router-link directive :- Router-link directive is used to link a specific parts of your applications.

Syntax :-

 <router-link></router-link>

Example,

<a [router-link]="['/AboutMe']">About Me</a>

Router-outlet directive :- Router-outlet directive is used to render the components for specific location of your applications. Both the template and templateUrl render the components where you use this directive.

Syntax :-

 <router-outlet></router-outlet>


The Route-Config :-  The route config  is used to map components to URLs.

Syntax :-

 @RouteConfig([
        {path: '/',        component: Home_Component, as: 'Home'},
        {path: '/AboutMe', component: AboutMe_Component, as: 'AboutMe'  }
        {path: '/ContactMe', component: ContactMe_Component, as: 'ContactMe'  }
    ])


The Route Params :- The route parameter  is used to map given URL's parameters based on the rout URLs and It is an optional parameters for that route.

Syntax :-

             params : {[key: string]: string}

Example,

@RouteConfig([
         {path: '/employ/:id', component: employe, name: 'emp'},
])



The live demo example, go to plnkr http://embed.plnkr.co/vjf9Zz/

ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Buy Books Online at Best Prices

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.