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.

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.

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:

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.