What are Components in Angular 2.0

Component in Angularjs 2:

This is main interesting feature of Angular 2.0. Now it is possible to develop angular app in more object oriented way. It is also possible to pass parameter between components.

In this section lest create two component and communicate between them.

The first component is PeopleComponent which will pass a list of person object to another component called ‘PersonComponent’ to show a list of person on card. The steps to create a component is very simple.

1. Create the template ‘people.component.html’

2. Create class for the component called ‘people.component.ts’

@Component decorators define the selector for the template of this component, the file for the html template has been defined by using templateUrl , css file has been configured using styleUrls and any services that are required are configured by using providers.

1. Add the component in the main app module

Here PersonComponent take an input called ‘person’. Therefore, any native element declared with ‘person-detail’ selector will take an input called ‘person’.

1. Add thePersonComponenttoAppModule.

2. Pass the input from the template of People Component.