CODEWITHSUNDEEP
javascriptangular
Zared H
Zared H

Reputation: 566

View Child bound to ng-select within ng-template not working

I have a html file with a ng-template modal box defined like this

HTML

<ng-template #content let-modal>
    <div class="modal-header">
      <h4 class="modal-title" id="modal-basic-title">Title</h4>
      <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <form [formGroup]="form"> 
        <div class="form-group">
          <div class="row">
            <div class="col-12">
              <label for="select">Select from:</label>
              <div class="form-group floating-label">
                <ng-select #selectList formControlName="selectList" [items]="dropdownList" multiple="true" bindLabel="name" bindValue="id" placeholder="Select an Item" >                      
                </ng-select>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>
    </div>
  </ng-template>
<ng-container *ngTemplateOutlet="content"></ng-container>

My component.ts has a ViewChild defined and I attempt to progromattically select values based on data loaded in. However, the select appears to do nothing. I do this exact same process in two different locations that are not within a ng-template without issue. I know I'm missing something here.

Component.ts

@ViewChild('selectList') selectList;
let item = this.selectList.itemsList.findByLabel(loadedData.name);
this.selectList.select(item); //does nothing

Any help on this is appreciated.

Upvotes: 1

Views: 1121

Answers (1)

Zared H
Zared H

Reputation: 566

So some additional googling yielded me an answer. The content of a ng-template does not exist in the DOM. ViewChild will only work with DOM content. Source: https://github.com/valor-software/ngx-bootstrap/issues/3825

Thank you to any that took the time to read this, hopefully it will help someone in the future.

Upvotes: 1

Related Questions