
Component and Directive is very important in Angular 2. Today we sharing difference between component and directive in Angular 2.
Components
|
Directive
|
For
register component we use @Component meta-data annotation.
|
For
register directives we use @Directive meta-data annotation.
|
Component is a directive
which use shadow DOM to create encapsulate visual behavior called
components. Components are typically
used to create UI widgets.
|
Directives is used to add behavior to
an existing DOM element.
|
Component is used to break
up the application into smaller components.
|
Directive is use to design re-usable components.
|
Only one component can be present per
DOM element.
|
Many directive can be used in a per
DOM element.
|
@View decorator or templateurl
template are mandatory in the component.
|
Directive don’t have View.
|
Component is used to define pipes.
|
You can’t define Pipes in directive.
|
viewEncapsulation can be define in
components because they have views.
|
Directive don’t have views. So you
can’t use viewEncapsulation in directive.
|
Example –
import {Component, View} from
'angular2/angular2';
@Component({
selector: 'message'
})
@View({
template: `
<h1>Hello Angular {{version}}</h1>
`
})
class Message {
constructor(public version: string) {}
}
<message></message>
|
Example –
import {Directive} from
'angular2/angular2';
@Directive({
selector: "[myDirective]",
hostListeners: {
'click': 'showMessage()'
}
})
class Message {
constructor() {}
showMessage() { console.log('Hello Directive'); }
}
<button myDirective>Click
here</button>
|
6 comments
Click here for commentsgood article
Balasvery nice article thanks
Balasvery useful comparission, thanks
BalasDirectives do not support the style(s) attribute in their definition
BalasShow Konversi KodeHide Konversi Kode Show EmoticonHide Emoticon