In Angular 2, I have a component that has a child component. However, I want to acquire a copy of that child component to use in the parent, to call its functions or whatever.
I found out that I could use local variables, and that way I will be able to use the component in the template. However, I don't to only use it in the template, I want to use it in the actual code of the component.
I found a way to do that, here is the child code:
//our child
import {Component, OnInit, EventEmitter} from 'angular2/core'
@Component({
selector: 'my-child',
providers: [],
template: `
<div>
<h2>Child</h2>
</div>
`,
directives: [],
outputs: ['onInitialized']
})
export class Child implements OnInit{
onInitialized = new EventEmitter<Child>();
constructor() {
this.name = 'Angular2'
}
ngOnInit() {
this.onInitialized.emit(this);
}
}
Parent:
//our root app component
import {Component} from 'angular2/core'
import {Child} from './child'
@Component({
selector: 'my-app',
providers: [],
template: `
<div>
<h2>Hello {{name}}</h2>
<my-child (onInitialized)="func($event)"></my-child>
</div>
`,
directives: [Child]
})
export class App {
constructor() {
this.name = 'Angular2'
}
func(e) {
console.log(e)
}
}
I implemented it here in this plunker. But it seems like a hack.
Isn't there a simpler way to attach the component to a variable in its parent?
You can use ViewChild
<child-tag #varName></child-tag>
@ViewChild('varName') someElement;
ngAfterViewInit() {
someElement...
}
where varName
is a template variable added to the element. Alternatively, you can query by component or directive type.
There are alternatives like ViewChildren
, ContentChild
, ContentChildren
.
@ViewChildren
can also be used in the constructor.
constructor(@ViewChildren('var1,var2,var3') childQuery:QueryList)
The advantage is that the result is available earlier.
See also http://www.bennadel.com/blog/3041-constructor-vs-property-querylist-injection-in-angular-2-beta-8.htm for some advantages/disadvantages of using the constructor or a field.
Note: @Query()
is the deprecated predecessor of @ContentChildren()
Update
Query
is currently just an abstract base class. I haven't found if it is used at all https://github.com/angular/angular/blob/2.1.x/modules/@angular/core/src/metadata/di.ts#L145