Get ContentChildren of downgraded ng2 component

I have a ng1 application which has been bootstraped using upgradeAdapter and uses downgraded ng2 components.

But I faced a problem with a @ContentChildren decorator. It seems that @ContentChildren doesn’t see ng2 components which has been downgraded to ng1 directives.

Plunker: http://plnkr.co/edit/aAoTsTtsJgZXjX3mswcN

ParentComponent:

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1><ng-content></ng-content>',
    directives: [ChildCmp]
})
export class AppComponent {
  @ContentChildren(ChildCmp) members = new QueryList();

  ngAfterContentInit() {
    console.log(this.members); //always with length 0
  }

}

ChildComponent:

@Component({
    selector: 'child-cmp',
    template: '<h2>Child</h2>'
})
export class ChildCmp { }

bootstrap:

var upgradeAdapter = new UpgradeAdapter();
angular.module('ng1App').directive('myApp', upgradeAdapter.downgradeNg2Component(AppComponent));
angular.module('ng1App').directive('childCmp', upgradeAdapter.downgradeNg2Component(ChildCmp));
upgradeAdapter.bootstrap(document, ['ng1App']);

2
Leave a Reply

avatar
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

I encoutered the same problem. But there is a workaround:

Create an Angular 2 wrapper component which uses the parent and child components in it’s template. In this component, you import your parent and child components and define them as directives in the @Component configuration. Then you only downgrade your wrapper component and use this one in your html.

Jason
Guest

I have created a wrap module for resolving this problem. @NgModule({ imports: [], declarations: [ WrapComponent, ParentComponent, ChildComponent ], exports: [ WrapComponent, ParentComponent, ChildComponent, ], entryComponents:[WrapComponent], }) export class WrapModule { constructor(){ console.log('WrapModule'); } } For example: Plunker