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