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

Advertisements

Leave a Reply

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

WordPress.com Logo

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

Google+ photo

You are commenting using your Google+ 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.

%d bloggers like this: