Angular 2 Directives [Components, Structural, Attribute Directives]

 There are 3 types of directives in Angular 2.

1.     Components Directives - directives with a template

2.     Structural Directives - change the DOM layout by adding and removing DOM elements.

3.     Attribute Directives - change the appearance or behavior of an element, component, or other directive.

Stayed Informed – Angular 2  Components Lifecycle Hooks

Stayed Informed – KendoUI for Angular 2 Grids

What are components directives?

A component is a directive with a template and the @Component decorator is actually a @Directive decorator extended with template oriented features.

1.     To register a component, we use @Component meta-data annotation.

2.     The directives are used to add behavior to existing DOM elements.

3.     The directives are used to design a reusable component.

4.     Only one component can be present per DOM element.

5.     Multiple directives are used per DOM element.

6.     The directive does not have @View etc.

What are structural directives?

The Structural directives are responsible for HTML layout and It is using Angular 2 for reshape the DOM's structure and also removing, or manipulating elements.

What are attribute directives?

Attribute directives are used to change the behavior, appearance or look of an element on a user input or via data from the service.

For example as,

import {Component, View} from 'angular2/core'';

@Component({
    selector: 'user-detail'
})

@View({
    template: "<div> <h1>{{userName}}</h1> <p>{{phone}}</p>"
})

class userDetail {
    constructor(public userName: string, public phone: string) {}
}

<user-detail></user-detail>

I hope you are enjoying with this post! Please share with you friends!! Thank you!!!