Can't use ViewChild to get Component in ngAfterViewInit() by dialog used <ng-template>

[wills]

hi ,

     I need to get the controls in ngAfterViewInit  by viewchild, but it's undefined.

     Please notice: must used <ng-template #content> in dialog

     this.combobox is undefined in ngAfterViewInit();

    

     HTML:

          <ejs-dialog #ejDialog

            [visible]='false'

            width='500px'

            height="400px"

            [showCloseIcon]='true'>

    <ng-template #content>

        <ejs-combobox #combobox></ejs-combobox>

    </ng-template>    

    </ejs-dialog>

     Ts:

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';

import { ComboBoxComponent } from '@syncfusion/ej2-angular-dropdowns';

@Component({

    selector: 'app-testviewchild',

    templateUrl: 'testviewchild.page.html',

    styleUrls: ['testviewchild.page.scss']

})

export class TestViewChild implements OnInit, AfterViewInit {

    

    @ViewChild('combobox') combobox: ComboBoxComponent;

    constructor() { }

    ngOnInit() {

        

    }

    ngAfterViewInit() {

        if (this.combobox == undefined) {

            console.log(true);

        } else {

            console.log(false);

        }

    }

}

[Indrajith Srinivasan]

Hi Wills, 

 

Greeting from Syncfusion support, 

 

We have validated your reported query. In Angular, we cannot access the reference of child elements when placed inside the ng-template. Instead, you can achieve your requirement by adding a minimal time delay using the setTimeout function. We have also prepared a sample, that tries to meet your requirements. 

 

Sample: https://stackblitz.com/edit/angular-nvf4zk-hbfein?file=app.component.ts  

 

StackOverflow link: https://stackoverflow.com/questions/47428783/get-reference-to-element-inside-ng-template/47429410#47429410  

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith 

[Adam Zaghouani]

Is it still impossible to reference just a case? 

I'm using some of Syncfusion's components within a form within modal and that modal within an ng-template.

So, same here accessing one of those components returns undefined.

And FormControl doesn't allow access to Syncfuions' component's functionalities.

I tried, ViewChild, ViewChildren, ElementRef, TemplateRef.. Yet nothing.

[Buvana Sathasivam]

Hi Adam, 

In the below sample, we have created form components inside the modal dialog within an ng-template. But, we were unable to replicate your issue. 

app.component.html 

 <ejs-dialog id="component-dialog" #Dialog> 

      <ng-template #content> 

         <form 

            id="formId" 

            [formGroup]="reactForm" 

            #formDir="ngForm" 

            class="form-horizontal" 

            novalidate="" 

          > 

            <div class="form-group"> 

              <div class="e-float-input"> 

                <ejs-datepicker 

                  #datepicker 

                  id="date_check" 

                  formControlName="date_check" 

                  name="date_check" 

                  placeholder="Date of Birth" 

                  floatLabelType="Always" 

                > 

                </ejs-datepicker> 

                <span class="e-float-line"></span> 

                <div *ngIf="date_check.errors"> 

                  <div 

                    *ngIf="date_check.errors.date && date_check.touched" 

                    class="e-error" 

                  > 

                    Please enter a valid date. 

                  </div> 

                </div> 

              </div> 

            </div> 

……………… 

       </form> 

      </ng-template> 

    </ejs-dialog> 

app.component.ts 

 @ViewChild('datepicker', { static: false }) datepicker: DatePickerComponent; 

 

 ngAfterContentInit() { 

    setTimeout(() => { 

      if (this.datepicker == undefined) { 

        console.log(true); 

      } else { 

        console.log(false); 

      } 

    }, 5); 

  } 

Sample: https://stackblitz.com/edit/angular-mdvwnc?file=app.component.html  

Could you please share the below information? 

• Share your code or modify the above sample to replicate your issue.
• Share the video to better understand your issue.

 

Regards, 

Buvana S