[Angular] Use Angular components in AngularJS applications with Angular Elements

When migrating AngularJS (v1.x) applications to Angular you have different options. Using Angular Elements is one of them. In this lesson we learn how to integrate an Angular Element into an AngularJS (v1.x) application. We will leverage some features release in the latest AngularJS 1.7.3 that make it fully compatible with custom elements.

Angular Element:

import {
  Component,
  OnInit,
  Input,
  Output,
  EventEmitter,
  AfterViewInit,
  ElementRef,
  Attribute,
  AfterContentInit,
  ChangeDetectorRef
} from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  // tslint:disable-next-line:component-selector
  selector: 'feedback-form',
  templateUrl: './feedback-form.component.html',
  styleUrls: ['./feedback-form.component.scss']
})
export class FeedbackFormComponent implements OnInit {
  feedbackForm: FormGroup;
  _name;

  @Input()
  set name(val) {
    this._name = val;

    this.feedbackForm.patchValue({
      name: val
    });
  }
  get name() {
    return this._name;
  }

  @Output()
  feedbackSubmit = new EventEmitter();

  constructor() {}

  ngOnInit() {
    this.feedbackForm = new FormGroup({
      name: new FormControl(this.name),
      feedback: new FormControl('')
    });
  }

  onSubmit({ value, valid }) {
    if (valid) {
      this.feedbackSubmit.next(value);
    }
  }
}

Using in AngularJS:

const appModule = angular.module('myApp', []);

appModule.component('myApp', {
  template: `
    <h1>AngularJS < Angular</h1>
    <feedback-form ng-prop-name="$ctrl.name" ng-on-feedback_submit="$ctrl.onFeedbackSubmit($event)"></feedback-form>
  `,
  controller: function() {
    this.name = 'Juri';

    this.onFeedbackSubmit = ev => {
      console.log('Got ', ev.detail);
    };
  }
});

angular.element(function() {
  angular.bootstrap(document, ['myApp']);
});

Here the important things is to know how to listen to the event and passing the prop:

ng-prop-<input_name>
ng-on-<output_name>