Difference between Directive and Component in AngularJS

In this article, we will see what is Directive & Components in Angular JS, along with finding the relevant differences between Directive and Components, with knowing their behavioral characteristics for building powerful Angular JS code. 

Directives are introduced with the invention of Angular, as a structural framework for building dynamic web applications. Directives were popular in manipulating the DOM i.e. Document Object Model and creating new custom elements that were part of the DOM. With the upgrade in technology and various modifications in the later versions of Angular(Angular 2 and higher versions, as Angular 2 is itself dependent on the component-based structure). The use of Components is now seen with great interest among the developers. Also, Components are termed as a more simplified version of Directives.

Directives are functions that are invoked whenever AngularJs’s HTML compiler($compile) finds it in DOM. It tells to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children.

Syntax:

import {Directive} from 'angular2/angular2';
@Directive({........
            ........})

Example: This example describes the basic usage of Directive in AngularJS.

Javascript

import {Directive} from 'angular2/angular2';

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

    constructor() {}

    showMessage() {
    console.log('This is an example of directive'); }
}

<button>GeeksforGeeks</button>

Output:

Geeksforgeeks
This is an example of directive

Components are just a simplified version of a directive. More specifically Components can be called a special kind of directive with templates, which are mainly used for component-based architecture. The Components can be utilized to make the simpler configuration in comparison to the plain directives. It facilitates us to write the component directives that will further be utilized to make it easier to upgrade to Angular. There are some cases where the Components are not beneficial to use, i.e. when we need an advanced directive definition options such as priority, multi-element, or terminal, or simply, when we want the particular directive that is triggered by the specific  attribute or CSS class, instead of an element.

Syntax: 

import {Component, View} from 'angular2/angular2';
@Component ({........
            ........ })
@View ({............
         ...........})

Example: This example describes the basic usage of Component in AngularJS.

Javascript

import {Component, View} from 'angular2/angular2';
@Component({
selector: 'message'
})
@View({
template: `
    <h6>Hello GeeksforGeeks</h6>
    <h6>This is an example of component</h6> `
})
class Message {
constructor(public version: string) {}
}

Output: 

Hello GeeksforGeeks
This is an example of component

Explanation: In the above examples, we have seen how to write simple Angular code for printing some messages, both using Component, and Directive. In the Component’s example, we have seen that it is mandatory to write view property, whereas, for Directives, we do not need to use view or templates. 

Difference between Directive & Components in AngularJS:

Components	Directives
The Component is always an element (‘E’). Templates are the mandatory property and always required in Component.	The directive can be an attribute, element name, comment, or CSS class (‘E’, ‘A’, ‘C’, ‘M’). The directive doesn’t always require templates.
The Component is used to break up the application into smaller components. That is why components are widely used in later versions of Angular to make things easy and build a total component-based model.	The Directive is used to design reusable components, which are more behavior-oriented.
As the Component has views, viewEncapsulation can be defined.	The Directive doesn’t have views. So you can’t use viewEncapsulation in the directive.
Although the Components make it easier to write simple, effective code, it has a simpler configuration than plain directives, it is optimized for component-based architecture. A Component does not support “compile” and “pre-link” functions.	The directives can be utilized for manipulating DOM objects.
Components should never modify any data or DOM that is out of their own scope.	Directives have isolated scopes, by default the child inherits the scope from its parent.
Only one component can be present per DOM element.	There can be more than one directive in a DOM element,
To register components, we use @Component meta-data annotation.	For directive, we use @Directive meta-data annotation.

Conclusion: A basic study on the topic has been given. Whether to use Component or Directive, totally depends on the purpose of writing a particular code for the usage. With the advent of emerging technologies, most web page design architectures are aiming toward obtaining a component-based model and this is when we need Components. On the other hand, directives give us plenty of options as selectors, input, output, and providers to write the code creatively.