Transcluding Angular Components into AngularJS Directives

Angular components can be transcluded into AngularJS directives.

Here is a very simple Angular component:

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

  selector: "a2-transclusion-contents",
  template: `<p>{{ message }}</p>`,
export class A2Transclusion {
  message = 'I am an Angular Component "transcluded" into AngularJS';

Here is an AngularJS directive that supports transclusion:

export function a1TransclusionDirective() {
  return {
    restrict: "E",
    transclude: true,
    scope: {},
    bindToController: {},
    controller: A1Transclusion,
    controllerAs: "a1ProjectionContents",
    template: `

class A1Transclusion {}

AngularJS needs to know about both the component and the directive:

import { A2Transclusion } from "./components/a2-transclusion-contents";
import { a1TransclusionDirective } from "./components/a1-transclusion";

// AngularJS Vendor Import
import * as angular from "angular";

// Import the upgradeAdapter singleton
import { upgradeAdapter } from "./upgrade-adapter";

// Name the application
const APPNAME = "angular-upgrade-example";

// Register classic AngularJS modules
  .directive("a1Transclusion", a1TransclusionDirective);

Finally, Angular content can be transcluded into AngularJS 1.x like so:


Last updated