Angular: Component vs Directive

Directives

“The mechanism by which we attach behaviour to elements in the DOM, consisting of Structural, Attribute and Component types.”

Angular templates are dynamic. When Angular renders them, it transforms the DOM according to the instructions given by directives. A directive is a class with a @Directive() decorator.

In addition to components, there are two other kinds of directives: structural and attribute. Angular defines a number of directives of both kinds, and you can define your own using the @Directive() decorator.

Just as for components, the metadata for a directive associates the decorated class with a selector element that you use to insert it into HTML. In templates, directives typically appear within an element tag as attributes, either by name or as the target of an assignment or a binding.

Example:

import {Directive} from 'angular2/angular2';

@Directive({
selector: "[myDirective]",
hostListeners: {
'click': 'showMessage()'
}
})

class Message {

constructor() {
    // initilization
}

showMessage() { console.log('Hello Directive'); }

}

Click here

Components

“The specific type of directive that allows us to utilize web component functionality - encapsulated, reusable elements available throughout our application.”

Components are basically just a new type of directive that is designed for component-based architecture. In a lot of ways, components are more restricted in their functionality, instead encouraging better conventions and design that actually leads to more maintainable and reusable code.

Components are so distinctive and central to Angular applications that Angular defines the @Component() decorator, which extends the @Directive() decorator with template-oriented features.

“Component is a directive with a view or template”

Example:

import {Component, View} from 'angular2/angular2';

@Component({
selector: 'message'
})

@View({
template:
<h1>Hello Angular {{version}}</h1>

})

class Message {
constructor(public version: string) {}
}

Differences:

Components

• For register component we use @Component 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.

  • Component is used to break up the application into smaller components.
  • Only one component can be present per DOM element.
  • @View decorator or templateurl template are mandatory in the component.
  • Component is used to define pipes

Directives

• For register directives we use @Directive meta-data annotation.

• Directives is used to add behavior to an existing DOM element.

• Directive is use to design re-usable components.

• Many directive can be used in a per DOM element

• Directives don’t have View.

• You can’t define Pipes in directive.