Components in Angular2

INTRODUCTION:

Components are the core building block of Angular 2 applications. A good technical definition would be “components in Angular 2 are a framework construct that owns a single node of HTML and dictates what children are written to that node, and handle all interaction with those children”.

There is one root component called app.component. Then there are components and subcomponents. The following example will make it more clear:

In this example app.component is the root component, header ,body and footer are its component and signup-login are subcomponents of body.

How to create a component:

Create a new file src/app folder with the name

<component_name>.component.ts

Eg – my-header.component.ts

In the file write the following:

This is the basic structure of a component.

If you working with Angular CLI then write the following command in command prompt and your component will be created with the structure shown above:

Explaining the structure of the component:

Component represents a reusable piece of UI that is usually depicted by a custom html element.It consists of the following –

• Selector- the aforementioned html element which will match the element tag that identifies this
• Template − This is used to render the view for the application. This contains the HTML that needs to be rendered in the application. This part also includes the binding and directives.
• Class − This is like a class defined in any language such as C. This contains properties and methods. This has the code which is used to support the view. It is defined in TypeScript.
• Metadata − This has the extra data defined for the Angular class. It is defined with a decorator.

(Ref- https://www.tutorialspoint.com/angular2/angular2_components.htm)

Components are very helpful as they make our code more understandable to other person by dividing the whole structure into various parts.And we can reuse these components in different applications as well.

WHY IT CAME INTO EXISTENCE WHEN CONTROLLERS WERE ALREADY THERE:

A lot of changes are there in Angular 1 and Angular 2.And one stand-out feature change is the introduction of components. Angular 2 is entirely component based. Components and directives have replaced the controllers and $scope of Angular 1. Components are directives with a template.

(Ref- https://www.technicaldiary.com/difference-angular-1-vs-angular-2/)

In Angular 1 we’d attach controllers to various parts of the page with our custom logic. Scopes would be attached or flow through, based on how our custom directives encapsulated themselves.In this model it wasn’t like any hierarchical structure. We’d just “attach” behaviors to various parts of our page and then have to deal with the complicated meta-structure created by our directives, controllers, and scopes.

To add logic to the page, we’d have to decide between building a controller or a custom directive.

Angular 2 drops all of this for a much cleaner, more object-oriented Component model.

Example of Controller in Angular 1 and Components in Angular 2 :

Angular 1 Controller:

Angular 2 Components:

(Ref- http://www.talkingdotnet.com/difference-between-angular-1-x-and-angular-2/)

This was all about Components.Try making a new component and learn more about it.

Keep learning.