I want to add an Angular 2 component inside my Angular 1 controller, so the Angular 1 controller is a parent and Angular 2 component is a child. I would like a child and parent be able to exchange data between each other like using @Input and @Output in Angular 2. Does anyone know how to do that?
1 Answer
This should be done using Upgrade Adapter module (shipped with Angular 2).
The steps should be: 1. Bootstrap you app using the adapter, instead of ng-app 2. Downgrade your angular 2 component and wrap it with Angular 1 directive.
You can use my super simple Todo app example (just look into the commits for the steps inside 'upgrade' branch): Todo-app example
This is how your bootstrap file look like:
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']);
And this is an example of the controller's template (Angular 1):
<div>
<todo-input (on-item-added)="add($event)"></todo-input>
<todo-list [todos]="todos"></todo-list>
</div>
1 Comment
SemperCallide
Hi Yaniv, I looked through the upgrade branch of the repo that you posted, but I can't find any example of using \@input or \@output in your ng2 component, like the question is asking. I don't even see the code that you quoted (for the controller template). Do you have a working example of using \@input or \@output of an ng2 component in an ng1 app? This is something my team has been trying to work out for a day or two now. Thanks.