First look at creating Angular 2 Component

ajay

First look at creating Angular 2 Component

Angular 2 applications are made up of components. A component is the combination of an HTML template and a component class that controls a portion of the screen.

– Component plays an important role in Angular 2.
– Angular 2 component is similar to other Component-based Javascript frameworks and Libraries.
– Unlike AngularJS, Angular 2 is completely based on components.
– Initially, Application will start from one component. Which will be the root component of Angular 2 application?       From the root component, all other components will be loaded.

Article on - Angular 2 Components (1)

Let’s have a closer look at what’s happening here and how a component is defined in angular 2.

Component:

import { Component } from ‘@angular/core’;

@Component({
selector: ‘my-component’,
template: ‘<div>Hello World</div>
<div>This is {{name}} Component</div>’
})

export class MyComponent {
constructor() {
this.name = “Angular 2”;
}
}

Output:
Hello World
This is Angular 2 Component

Explanation:
Here, Angular 2 Component is written using Typescript (Learn more about Typescript in typescript.org).
The first step is to import Component decorator from Angular 2 core. A component decorator is a metadata where we have to mainly specify the selector and the template. Then the final step is to export the class to make it available for bootstrap the application or available for other components.

Component Decorator:

The @component decorator will be attached to the class and it is imported from an angular core. Decorators are used a lot in angular 2. Decorator allows us to transform normal typescript classes into a component.
Without the decorator a component would be nothing, a class would be worth nothing. So what a decorator does is, each component in angular 2 as it is the part of web page, need some HTML code to display, and the HTML code belonging to a component is stored in a template. This template can be an external file or it can be defined in the ts file. Which is inside @Component decorator as an argument.

@Component({
selector: ‘my-component’,
template: ‘<div>Hello World</div>’
})

Or

@Component({
selector: ‘my-component’,
templateUrl: ‘./my-component.html’
})

For a component to work template is a required. Note that Component can work without a selector when we integrate routing in our application. So the selector is also an optional argument. The cool thing about the template HTML code is that it is controlled by our typescript code. So each component can modify it’s HTML template as per the requirement.
Using string interpolation (which is two opening and closing flower brackets – {{}}) we can display any property defined in typescript code. In other terms it is known as data binding. Angular 2 provides many forms of data binding, string interpolation is one of them.

<div>This is {{name}} Component</div>

The other important property in @Component decorator is the selector. The selector is what allows us to use this component throughout our application. Think about it in this way, we are kind of creating our own html elements. That’s what actually a component at the end, our custom html element. Selector acts like a css selector, where we select html element or its property. So selector can be any element or property. Example,

> app.component.ts

import { Component } from ‘@angular/core’;

@Component({
selector: ‘#app’,
template: ‘<div>Hello World</div>
<div>This is {{name}} Component</div>’
})

export class MyComponent {
constructor() {
this.name = “Angular 2”;
}
}

> index.html

<body>
<div id=”app”></div>
</body>

When you want to style your component with css, we can define separate css written only for a particular component. Which will reduce overhead of adding all styles in one file. Angular 2 provides a way to import style(s) for each component. Which can be an external style sheet file or inner style(s). The style can be added using @Component decorator argument.

> app.component.ts

import { Component } from ‘@angular/core’;

@Component({
selector: ‘app’,
template: ‘<div><h1>Hello World</h1></div>’,
styles: [`
h1 {
color: red;
}
`]
})

Or

> app.component.ts

import { Component } from ‘@angular/core’;

@Component({
selector: ‘app’,
template: ‘<div><h1>Hello World</h1></div>’,
stylesUrls: [‘./styles.css’,’./styles2.css’]
})

As in the example above, there are two ways we can define styles for a component. First one is styles array, where we can define any css styles. Other one is using external style sheet. Where we can pass array of url strings.

Note:
for more information about Angular 2 Component decorators check out this link.

Component Life Cycle:
There are 9 lifecycle hooks for angular 2 components.
– Constructor
– ngOnChanges
– ngOnInit
– ngDoCheck
– ngAfterContentInit
– ngAfterContentChecked
– ngAfterViewInit
– ngAfterViewChecked
– ngOnDestroy

In which constructor is not considered as a lifecycle hook, but when a component loads the constructor gets called. Which will invoke lifecycle hooks.

Note: For more explanation on Life Cycle Hooks, check out angular.io – Life Cycle Hooks.

about the author

ajay