Angular 1 and Angular 2 Integration

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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book