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.
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 is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|