Difference between component and directive in Angular 2 ?



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>









Keywords - component vs directive , Difference between component and directive in Angular 2 


Previous
Next Post »

8 comments

Click here for comments
11 January 2016 at 01:34 ×

very nice article thanks

Balas
avatar
admin
Anonymous
15 April 2016 at 08:53 ×

very useful comparission, thanks

Balas
avatar
admin
19 May 2016 at 17:07 ×

Directives do not support the style(s) attribute in their definition

Balas
avatar
admin
10 June 2018 at 21:39 × This comment has been removed by a blog administrator.
avatar
admin
21 October 2018 at 23:23 × This comment has been removed by a blog administrator.
avatar
admin
Thanks for your comment