Angular 2 components

Today in this tutorial, we will continue learning Angular 2 step by step and here we will learn all about Angular 2 component.

In Angular 2 “everything is a component.” That's why Angular 2 is also called a component-based framework, which allows us to create reusable UI widgets.

Here in this tutorial, First of all, We will create a very simple Angular 2 Component (EmployeeList Component) where we will learn a little about lifecycle hooks also. Then we will create an another component (SearchBar Component) where we will see how to nest the SearchBar component inside the Employee component and communicate with each other.
Learn Angular 2 step by step
Angular 2 components
import {Component, OnInit} from '@angular/core'
import {EmployeeModel} from '../Models/EmployeeModel'
@Component({
    selector:'employee-list',
    templateUrl:'employee-list.component.html',
    moduleId: module.id
})
export class EmployeeListComponent implements OnInit{
    public EmployeeList: Array<EmployeeModel> = [];
    public LoadIntialData():void{
        this.EmployeeList = [{
            EmployeeID:1,
            FirstName: "Sourav",
            LastName:"Mondal",
            ContactNo: "1234567890",
            Designation:"Software Developer"
        },
        {
            EmployeeID:2,
            FirstName: "Rik",
            LastName:"Decosta",
            ContactNo: "1478523690",
            Designation:"Software Developer"
        },{
            EmployeeID:3,
            FirstName: "Jhon",
            LastName:"Decosta",
            ContactNo: "5874213690",
            Designation:"Software Developer"
        }];
        }

    ngOnInit(){
        this.LoadIntialData();
    }   
    
}
Posted By :