Angular 2 - How to access component directives

Question

I attached the dialog component as directives to show it on the main page of the component when I click the button on the main page (which links to the main component). Here is how I did it.

In the template

<button id="goToTasksCases" class="btn btn-success btn-lg" (click)="doShowStartNewCase($event)">START A NEW CASE</button> <modal-new-case></modal-new-case> 

In component

 @Component({ selector: 'case-index' }) @View({ templateUrl: 'client/app/case/case.index.html', directives : [ModalNewCaseComponent] }) export class CaseIndexComponent { doShowStartNewCase(event: any) { // how can I access the ModalNewCaseComponent } } 

However, I need to set some values ​​for the child component ( ModalNewCaseComponent ) after some callback from the Rest service. How can I achieve this with the current setup?

Answer 1

You can request child view items:

 @Component({ selector: 'case-index', templateUrl: 'client/app/case/case.index.html', directives : [ModalNewCaseComponent] }) export class CaseIndexComponent { @ViewChild(ModalNewCaseComponent) modal: ModalNewCaseComponent; afterViewInit() { // this.modal will have value } doShowStartNewCase(event: any) { // how can I access the ModalNewCaseComponent } } 

Read more about ViewChildren and ContentChildren here .