Wednesday, May 24, 2017

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
//export a class
export class CSSComponent{

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 =[
    //For debugging we can enable tracingfine Routes/
    imports: [
    • Declare the components in declarations array
     declarations: [

    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>
    <div class="container">


    No comments:

    Post a Comment