What is the component in Angular 5 ? (Part 3)

Components are the building blocks of angular application. Technically components are the typescripts class which is composed of the following 3 things

Template: This is used to render the view for the application.

Class: This typescript class which contains properties and methods which one will be used in view.

Decorator: Decorator adds metadata to the class to make it as component.

Basic structure of components as given below

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

How to create our own component for Emp detail and display it in View ?

Step 1: Go to the app.component.ts file and Create the Emp class having required property and assign the value in AppComponent class as given below

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

// create Emp class 
export class Emp
{
  name:string;
  address :string;
  empId: number;
}

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


export class AppComponent {
  emp:Emp = {
    empId: 1000,
    name: ' Chandradev ',
    address:' Bangalore '

  }
}

Step 2: Go to the app.component.html file and write the binding code like this

<div>
    <fieldset>
        <legend>  <b> Emp Details</b></legend>
        <h4> EmpId: {{emp.empId}} </h4>
        <h4> Emp Name: {{emp.name}} </h4>
        <h4> Emp Address: {{emp.address}} </h4>
    </fieldset>
 
</div>

Step 3 : Now save and run the application, you will see the following output