Angular 2 components vs directives
1.
@Component meta-data annotation is used to register the components.
|
@Directive
meta-data annotation is used to
register the directives.
|
2.
The components are used to create UI widgets.
|
The
directives are used to add behavior to existing DOM elements.
|
3.
The components are used to split to
application into smaller parts.
|
The
directives are use to design a reusable components.
|
4.
Only one component is used per DOM element.
|
More
than one directive are used per DOM element.
|
5.
In the components, @View, template and templateUrl
are mandatory in the components.
|
The
directive do not have @View etc.
|
Example
for using Component.
import {Component, View}
from 'angular2/core';
@Component({
selector:
'hello-world'
})
@View({
template:
"<h1>Hello
{{angular}}</h1>"
})
class hello {
constructor(public angular: string)
{}
}
<hello-world></hello-world>
Example
for using Directive.
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>
For more detail, go to link
http://stackoverflow.com/questions/32680244/directive-v-s-component-in-angular2
For more detail, go to link
http://stackoverflow.com/questions/32680244/directive-v-s-component-in-angular2
|
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..
|