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!!!