Simple Angular Route

Create an angular component

• Create a component.ts
• Create an html file
• Import angular core modules
• Define metadata for the component using @Component
• Create a new class,specify the properties of a class and export the class

//Import angular core 
import {Component} from '@angular/core';
//Define metaData
@Component({
    templateUrl:'app/css/css.component.html'
  
})
//export a class
export class CSSComponent{
    cssId:String;
    cssName:String;
}

Specify the Component details in App.module

• Import Router module

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

     

• In app.module, import the component

//Import css component
import { CSSComponent } from './css/css.component'; 

In app.module, define the route in RouterModule  and add routes to the imports

//define Routes

const appRoutes :Routes =[

{path:'Modal',component:CSSComponent}

]

//For debugging we can enable tracingfine Routes/

imports: [

RouterModule.forRoot(appRoutes,{enableTracing:true}),

• Declare the components in declarations array

 declarations: [
     CSSComponent
  ],

Provide the link in app.Component 

• Specify the route link in app.component

<div class="navbar navbar-fixed navbar-inverse">

<!--Container-fluid Changes are reflect even for small changes-->

<div class="container-fluid">

<a class="navbar-brand">{{title}}</a>

<ul class="nav navbar-nav">

<li><a routerLink ="">Main</a></li>

<li><a routerLink ="/Modal">Modal</a></li>

</ul>

</div>

</div>

<div class="container">

<router-outlet></router-outlet>

</div>

Output