Angular 2 component inside Angular 1?

Question

I want to add an Angular 2 component inside my Angular 1 controller, so the Angular 1 controller is the parent and Angular 2 is the child. I would like the child and the parent to be able to exchange data with each other using @Input and @Output in Angular 2. Does anyone know how to do this?

Answer 1

This should be done using the Upgrade Adapter module (shipped with Angular 2).

The steps should be: 1. Download the application using the adapter instead of ng-app 2. Reduce your Angular 2 component and wrap it with Angular 1 directive.

Todo ( "upgrade" ): Todo-app

:

declare var angular: any;

import {UpgradeAdapter} from 'angular2/upgrade';
import {TodoList} from "./components/todo-list";
import {TodoInput} from "./components/todo-input";
import {TodoApp} from "./components/todo-app";

let adapter = new UpgradeAdapter();

angular.module('todoListWorkshopApp').directive('todoList', adapter.downgradeNg2Component(TodoList));

angular.module('todoListWorkshopApp').directive('todoInput', adapter.downgradeNg2Component(TodoInput));

angular.module('todoListWorkshopApp').directive('todoApp', adapter.downgradeNg2Component(TodoApp));

adapter.bootstrap(document.body, ['todoListWorkshopApp']);

(Angular 1):

<div>
  <todo-input (on-item-added)="add($event)"></todo-input>
  <todo-list [todos]="todos"></todo-list>
</div>