Nested component in angular 2

In the previous article of the series Learning Angular 2 step by step, we learned about Angular 2 Component. Now in this tutorial, we will learn a little more about angular 2 component where we will see how to create a nested component and how the components (parent component & child component) communication with each other. 

In the previous tutorial, we have created a component EmployeeList Component for showing list of employee data. Now in this tutorial, we will create an another component SearchBar Component and then we will see how to nest the SearchBar component inside the EmployeeList component and communicate with each other.
Learn Angular 2 step by step
Nested component in angular 2
import {Component, Input, Output, EventEmitter} from '@angular/core';
@Component({
    selector:'search-bar',
    templateUrl:'search-bar.component.html',
    moduleId:module.id
})
export class SearchbarComponent{
    @Input()
    PlaceHolderText:string ="Search...";
    
    @Output()
    Search = new EventEmitter<string>();

    OnSearch(searchText):void{
        this.Search.emit(searchText);
    }
}
Posted By :