Dropdown

[vin]

I need to hide and show the dropdown  *ngIf="showTask"

when i show the dropdown, i am not able to access the dropdown, it shows null

  @ViewChild('ddTask') public ddTask: DropDownList;

 <div class="col-md-3  mt-2" *ngIf="showTask">

                <ejs-dropdownlist #ddTask name="task" class="e-error ts-bold" (change)="taskChange($event)"

                id='task' [dataSource]='aBacklogs' [fields]='taskFields'

               floatLabelType='Auto'></ejs-dropdownlist>

                <!-- [(ngModel)]="itemId"  [allowFiltering]='true'  placeholder='Select Task' -->

            </div>

I am trying to set the selected index when showTask is true.

But ddTask is still not ready!!. i tried with seTimeout function. work randomly.

 if(this.ddTask){

        this.ddTask.index =0;

        }

[Berly Christopher]

Hi Vin, 

  

Greetings from Syncfusion support. 

  

We have checked the reported issue. When we toggle the component, its instance was not created at that time. Due to this time delay, the index property was not set to the component properly. So, we suggest you to assign the index value in the ngAfterViewChecked life cycle hook which is invoked each time the view of the given component has been checked by the change detection mechanism. 

  

Kindly refer the below code example. 

  

  toggle() { 

    this.isShown = !this.isShown; 

  } 

  ngAfterViewChecked() { 

    if (this.isShown) { 

      this.DropObj.index = 0; 

    } 

  } 

 

  

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

  

Regards, 

Berly B.C