AngularJS Components vs Directives

Components vs Directives — an interview question definitely asked to an AngularJS developer. This is because, until angular 1.5, directives were such an important part of AngularJS. Later, angular introduced a new element called component. Component is a special kind of directive. Component eventually led the angular to the next level which is Angular 2. All angular 2 plus versions are based on component-based structure.

So what is a directive and what is a component and what is the difference between them?

What is Directive?

AngularJS definition for directive is:

Directives are markers on DOM element (such as an attribute(‘A’), element name(‘E’), comment(‘M’) or CSS class(‘C’)) that tell AngularJS’s HTML compiler ($complile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform DOM element and its children.

This is the reason directives are of such importance in Angular since they have the power to manipulate the DOM (Document Object Model) and create new custom elements which are part of the DOM.

What is Component?

Component, as it means is an independent block of code. As said, in angular, component is a special kind of directive that uses a simpler configuration suitable for component-based application structure which makes it simpler to use as compared to directives.

What is the difference between a component and a directive?

Unlike directives, component is always elements(‘E’) which means it should always require a template. So, the first difference is a template is a mandatory property to a component whereas template is not mandatory in directives.

Isolating scope of directive:

Directives can modify DOM or data that is outside of their scope typically using the link function to register DOM listeners as well as update the DOM

function link(scope, element, attrs, controller, transclude(fn) { 
     ----- 
}

• scope is an AngularJS object.
• element is jqLite wrapped element that this directive matches.
• attrs is a hash object with key-value pairs of normalized attribute names and corresponding attribute values.
• controller is directive’s required controller instance(s) or its own controller
• transclude(fn) is a transclude linking function pre-bound to correct transclusion scope. It makes the content of a directive with this option have access to the scope outside of the directive rather than inside.

Unlike directives, the component can only access data within isolated scope. The main reason to avoid adding these features to a component is to prevent additional complexity. Because when the problem occurs it is very difficult to identify which part of the application responsible for modifying data

Another difference is no more DOM manipulation in component-based structure, a component doesn’t have a “link” function. in angular docs its clearly state that if you want to perform pre-link, compile then go with the directives. in the component, those features are not available.

Reusable components vs reusable directive behaviours:

The component-based structure has set of components that independently control their own view and data without conflicting one another. For example, YouTube. YouTube video is one component, comment is another one. The list of videos is another component which updates real time. They all exist in the same space but independent from other components. Angular components also follow the component-based structure.

With the help of the component, we can divide the application into smaller reusable components. Directives in the other hand more focus on the behaviors. it can add behaviors to existing DOM elements. Hence, Angular components are reusable components while directives use to create reusable behaviors.

Communication between components:

Directives have the ability to communicate with other directive controllers.This can be achieved in a component by providing an object mapping for the require property. The object can be assigned to require property where the key is a property name that binds the required controller. Consider the following example

.component('myPosts', {
   require: {
      messageCtrl: '^myMessages'
   },
   controller: function() {
      this.$onInit = function() {
         this.messageCtrl.addMessage(this);
            console.log(this);
         };
      },
   templateUrl: 'my-posts.html'
});

Here myPosts component can access the myMessages component controller through the this.messageCtrl property. The required controllers will not be available during the instantiation of the controller, but they are guaranteed to be available just before the $onInit method is executed.

Life cycle events of component and directive:

Directive and component instances have a lifecycle as Angular creates, updates, and destroys them. Angular offers lifecycle hooks that provide visibility into these key life moments and the ability to act when they occur. Directives are consisted with compile, link and controller hooks to complete its life cycle. A component has a controller but no link functions since it’s primary use is to create reusable components. Component has its own lifecycle hooks like $onInit(), $onChanges(), $doCheck(), $onDestroy() etc.

When not to use components:

• For directives that need to perform actions in compile and pre-link function because they aren’t available.
• When you need advanced directive definition option like priority, terminal, multi-element
• When you want a directive i.e. trigerred by an attribute or CSS class rather than an element.

This post is solely based on my understandings from AngularJS Tutorial

Written on 15th December, 2019