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>
|
Comments
Post a Comment