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>