AngularJS directive not converting properly to Angular component

When migrating from AngularJS to Angular (2+), converting AngularJS directives into Angular components can be tricky. The syntax and the way directives and components behave are significantly different between the two frameworks, and mismatches during migration can lead to issues where the directive doesn’t behave as expected in the new Angular component.

This guide provides a step-by-step approach to correctly convert an AngularJS directive into an Angular component.

Understanding Key Differences

AngularJS Directives:

AngularJS directives are used to create reusable and extendable HTML elements.
They are often tied to an element, attribute, or class.
The directive’s template and logic are bound together within the directive.

Angular Components:

Angular components are a more structured version of directives in Angular.
They consist of metadata (@Component) and rely heavily on the component lifecycle.
Components are always associated with a template, and they handle their own encapsulated logic.

Step-by-Step Conversion Process

1. Convert Directive to Component Metadata

In AngularJS, a directive is defined using directive() or controller. In Angular, this becomes a component with a @Component decorator.

AngularJS Directive (Sample):

angular.module('app').directive('myDirective', function() {
  return {
    restrict: 'E',
    template: '<div>{{message}}</div>',
    controller: function($scope) {
      $scope.message = "Hello from AngularJS Directive!";
    }
  };
});

Angular Component (Converted):

import { Component } from '@angular/core';

@Component({
  selector: 'my-directive', // Note: Element selector
  template: '<div>{{ message }}</div>',
})
export class MyDirectiveComponent {
  message = 'Hello from Angular Component!';
}

@Component replaces the directive definition.
selector specifies the tag name to use in the HTML.
template is the inline template for the component.

2. Handling Controller and Component Logic

In AngularJS, directives often use a controller to define logic. In Angular, we move this logic directly into the component’s class.

AngularJS Controller Logic (in directive):

controller: function($scope) {
  $scope.message = 'Hello, AngularJS!';
}

Angular Component Logic:

export class MyDirectiveComponent {
  message = 'Hello from Angular Component!';
}

The controller’s logic goes directly into the MyDirectiveComponent class.
In Angular, there is no need for $scope. You directly bind the component’s properties to the template.

3. Inputs and Outputs in Angular Components

AngularJS directives use $scope to bind data, but in Angular, we use @Input() for passing data to a component and @Output() for event binding.

AngularJS Directive (Data Binding):

template: '<div>{{ message }}</div>',
controller: function($scope) {
  $scope.message = 'Hello, AngularJS!';
}

Angular Component (Data Binding):

import { Component, Input } from '@angular/core';

@Component({
  selector: 'my-directive',
  template: '<div>{{ message }}</div>',
})
export class MyDirectiveComponent {
  @Input() message: string = 'Default Message';
}

@Input() is used to pass data into the component.
The message can be passed from the parent component using property binding.

In HTML (Parent component):

<my-directive [message]="parentMessage"></my-directive>

4. Handling Lifecycle Hooks

AngularJS directives can have lifecycle hooks like link and compile. In Angular, these are replaced by component lifecycle hooks, such as ngOnInit, ngOnChanges, ngOnDestroy.

AngularJS Directive (Link Function):

link: function(scope, element, attrs) {
  element.on('click', function() {
    alert('Directive clicked!');
  });
}

Angular Component (Using ngOnInit or ngAfterViewInit):

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-directive',
  template: '<div (click)="onClick()">Click Me!</div>',
})
export class MyDirectiveComponent implements OnInit {
  ngOnInit() {
    console.log('Component initialized');
  }

  onClick() {
    alert('Component clicked!');
  }
}

Use Angular’s lifecycle methods like ngOnInit() for initialization and other hooks like ngAfterViewInit() for DOM interactions.

5. Handling Transclusion (Optional Content Projection)

AngularJS directives may have transclude to insert content into the directive template. In Angular, this is replaced with Content Projection using <ng-content>.

AngularJS (Transclusion):

template: '<div><ng-transclude></ng-transclude></div>',
transclude: true

Angular (Content Projection):

@Component({
  selector: 'my-directive',
  template: '<div><ng-content></ng-content></div>',
})
export class MyDirectiveComponent {}

ng-content is used in Angular to project content from the parent component into the directive’s template.

6. Converting Directives with `restrict` Attribute

AngularJS has a restrict property, which determines how the directive is applied to HTML (e.g., element, attribute, class). Angular components are always associated with an element, but if you need to convert it to an attribute-like behavior, you can manage that with the @Directive decorator in Angular.

AngularJS (Restrict as Element):

restrict: 'E',  // Restrict to Element

Angular (Component):

@Component({
  selector: 'my-directive', // As an element
  template: '<div>{{ message }}</div>',
})

Angular components are typically used as elements (<my-directive></my-directive>).
For attributes, you could use @Directive instead.

Common Conversion Issues

Missing or Incorrect Inputs/Outputs: Ensure you correctly manage data binding with @Input and @Output.
Lifecycle Methods Confusion: Understand the different lifecycle methods between AngularJS and Angular (like ngOnInit vs. link).
Template Binding Errors: Always use Angular’s property binding (e.g., [message]) instead of $scope.
Event Binding Differences: In Angular, event binding is done with (eventName) instead of ng-click.

Summary

To successfully convert an AngularJS directive to an Angular component, you should:

Replace directive() with @Component.
Move logic from the controller to the component class.
Use @Input() for inputs and @Output() for outputs.
Replace link and compile with Angular lifecycle hooks like ngOnInit and ngAfterViewInit.
Use <ng-content> for content projection (transclusion).
Correctly handle event binding and property binding.

By following these steps, you will ensure that your AngularJS directives are smoothly converted to Angular components.