Chandradev's Blog

If you are working with Angular 5 using visual studio code, then there is very simple approach to create the component using Angular CLI.

Step 1: Go to the Visual Studio Code Terminal and type ng g c emp
or ng generate component Emp. Then it will create the component for you

Now we will do some coding in Emp Component for displaying data in View

Step 2: Go to the emp.component.ts and create the Emp class and add some value for Emp properties like this

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

export class Emp 
{
  empId: number;
  emailId :string;
  mobileNum:number;
  address :string;

}
@Component({
  selector: 'app-emp',
  templateUrl: './emp.component.html',
  styleUrls: ['./emp.component.css']
})

export class EmpComponent implements OnInit {
emp:Emp={
  empId:2000,
  emailId:"Chandradev@gmail.com",
  mobileNum: 9241503288,
  address: "Bangalore"
}
  constructor() { }
  ngOnInit() {
  }

}

Step 3: Go to the emp.component.html and write the code for binding the Emp Class like this

<div>
    <fieldset>
        <legend>  <b> Emp Details</b></legend>
        <h4> EmpId: {{emp.empId}} </h4>
        <h4> Emp EmailId: {{emp.emailId}} </h4>
        <h4> Emp Mobile Num: {{emp.mobileNum}} </h4>
        <h4> Emp Address: {{emp.address}} </h4>
    </fieldset>
 
</div>

Step 4: Now we will go to the app.component.ts and imports the emp component like this
import { EmpComponent } from ‘./emp/emp.component’;

Complete code is like this

import { Component } from '@angular/core';
import { EmpComponent } from './emp/emp.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent {
  title = 'Angular 5 Demo';
}

Step 5: Now go to the app.component.html and inject the Emp Selector like this

<div>
  Welcome to {{title}}
  <br>
  <app-emp></app-emp>
</div>

Now save and compile the code you will get output like this