Angular 7 Lesson 6 - How to create component and use it with router outlet

How to create component and use it with router outlet

Video link:

Full tutorial link;
https://blog.myzingonline.com/p/angular-7.html

Step 1: Create a component

ng g c basicform

It will create a directory with files in it.

basicform.component.ts

import { Component, OnInit } from '@angular/core';

@Component({

  selector: 'app-basicform',

  templateUrl: './basicform.component.html',

  styleUrls: ['./basicform.component.css']

})

export class BasicformComponent implements OnInit {

  constructor() { }

  ngOnInit() {

  }

}

basicform.component.html

<p>

  basicform works!

</p>

Step 2: Add reference to app.module.ts

AppModule.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import * as $ from 'jquery';

import { BasicformComponent } from './basicform/basicform.component';

@NgModule({

  declarations: [

    AppComponent,

    BasicformComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

Step 3: Add a route to app-routing.module.ts

You need to know path and component  in order to define it.

const routes: Routes = [{

path:'basicForm',

component:BasicformComponent

}];

App-routing.module.ts

import { NgModule } from '@angular/core';

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

import { BasicformComponent } from './basicform/basicform.component';

const routes: Routes = [{

path:'basicForm',

component:BasicformComponent

}];

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule { }

Step 4: Add routerlink in App.Component.html

   <ul class="menu">

      <li> <a routerLink="/basicForm" > Basic Form</a> </li>

    </ul>

Router link will map rout and help us injecting to routoutlet.

Step 5: Add  <router-outlet></router-outlet>

Where you want to show that component output.

<div class="row">

  <div class="col-sm-12">

    <router-outlet></router-outlet>

  </div>

</div>

AppComponent.html

<!--The content below is only a placeholder and can be replaced.-->

<div class="container">

  <div class="row">

    <div class="col-sm-12">

      <h1>Welcome to Myzingonline</h1>

    </div>

   

  </div>

<div class="row">

  <div class="col-sm-12" id="menu-bar">

    <ul class="menu">

      <li> <a routerLink="/basicForm" > Basic Form</a> </li>

    </ul>

  </div>

</div> 

<div class="row">

  <div class="col-sm-12">

    <router-outlet></router-outlet>

  </div>

</div>

 </div>

Share on Google Plus

About myzingonline

Myzingonline is all about zing to share experience, knowledge, likes, dislikes and ideas of a person to the world.