In this article, you will learn about component in Angular 2.
Introduction The component is class with the template, which deals with the View of Application and it’s containing the core logic of the page. We can compare it with the Controller in Angular 1.x. We need to write the Application logic inside the class, which is used by the View. The component class interacts with the View through Methods and Properties of API. Angular 1.x concept such as directives, controllers and scope are combined into component. In other words we can say, component refers to directives, which are always associated with the template directly. Component Lifecycle Angular is a managed component lifecycle by itself. Angular is able to create and render the component. It also renders the component children and also updates the data, when associated model is changed and Angular destroys the component before removing from the DOM. Angular component lifecycle hooks provide us visibility into the important moments and we can do some custom activity, when they are raised. Angular will call lifecycle hook only if it is defined. Following are life cycle sequence for the directive and component.
Example In this example, I have declared all the life cycle events for the component as following. In all the events, I have just written down the name of the event in the console, using “console.log” JavaScript function. Component file
Summary Angular Component is class with the template, which deals with View of the Application and also contains the business logic. It is very useful to divide our Application to smaller parts.
AngularJS Recipes