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/