How to create components in angular 5 using Angular CLI ? (Part 4)

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;
  address :string;

  selector: 'app-emp',
  templateUrl: './emp.component.html',
  styleUrls: ['./emp.component.css']

export class EmpComponent implements OnInit {
  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

        <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>

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';

  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

  Welcome to {{title}}

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


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.