Get HTML element from igx-grid. Length always 0

Question

I am working on a igx-grid. I have some igx-columns with igx-select inside. I tried to change the style of the igx-selects in Typescript using querySelectorAll and getElementsByClassName but the length of the selected elements is always 0. How can I fix this? I tried to use setTimeout but again is the length of the selected element 0.

Here is my igx-grid.

 <div class="grid__wrapper">

  <igx-grid igxPreventDocumentScroll
            #grid1
            igxOverlayOutlet
            [height]="'500px'"
            width="99%"
            style="margin-top: 1%; margin-left: 0.5%; margin-right: 0.5%;"
            toolbarTitle="My App Toolbar"
            [emptyGridMessage]="'Grid is empty'"
            [hiddenColumnsText]="'Show/Hide'"
            [pinnedColumnsText]="'pinned'"
            [autoGenerate]='false'
            [data]="sqlData"
            [primaryKey]="'nameId'"
            [showToolbar]="true"
            [allowFiltering]="true"
            [columnHiding]="true"
            [rowHeight]="40"
            filterMode="excelStyleFilter">

    <igx-grid-toolbar>
      <igx-grid-toolbar-title>My App</igx-grid-toolbar-title>

        <button igxButton="flat" igxRipple (click)="grid1.clearFilter()">
          <igx-icon family="material">clear</igx-icon>
          <span>Delete Filter</span>
        </button>

        <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
      </igx-grid-toolbar-actions>
    </igx-grid-toolbar>

    <igx-paginator></igx-paginator>

    <igx-column width="500px" field="names" header="Worker Names" [editable]="true" [resizable]="true" [sortable]="true">
      <ng-template igxCell let-cell="cell" let-value>
        <igx-select #selectName
                    class="mySelectClass"
                    type="line"
                    [(ngModel)]="cell.value"
                    placeholder="Select Name"
                    [overlaySettings]="customOverlaySettings">
          <igx-select-item *ngFor="let item of namesArray" [value]="item">
            {{ item }}
          </igx-select-item>
        </igx-select>
      </ng-template>
    </igx-column>

  </igx-grid>
</div>

And this is my .ts-file:

  public namesArray: string[] = [
    '',
    'Elena',
    'Joe',
    'Iva',
    'Kris'];

  public customOverlaySettings!: { outlet: IgxOverlayOutletDirective; };

  public ngAfterViewInit() {
    this.customOverlaySettings = {
      outlet: this.grid1.outlet,
    };
    const igxSelectHtmlElements = document.querySelectorAll('.mySelectClass')
    console.log("Lenght always 0: " + igxSelectHtmlElements.length)

    const igxSelectHtmlElementsByClassName = document.getElementsByClassName('mySelectClass')
    console.log("Lenght always 0: " + igxSelectHtmlElementsByClassName.length)
    
    for (let i = 0; i < igxSelectHtmlElementsByClassName.length; i++) {
      (igxSelectHtmlElementsByClassName.item(i)?.children[0] as any).style.width = '420px';
    }
  }

Answer 1

You should avoid querying the DOM in Angular... As most content is usually generated dynamically, the idea is to have some data in your component influencing how the html is generated.

This way changing the component data causes the html to change.

Instead of doing a document query, you should use ngClass to set the class depending on an attribute.

say you have this css in your component:

.w420 {
 width: 420px;
}

add some data to your array so it would have or not the class (calculate it if necessary):

public namesArray: = [
    {name: '', hasW: true},
    {name: 'Elena', hasW: false},
    {name: 'Joe', hasW: true},
    {name: 'Iva', hasW: false},
    {name: 'Kris', hasW: true},
    ];

And add ngClass to your select:

<igx-select #selectName
    class="mySelectClass"
    type="line"
    [(ngModel)]="cell.value"
    placeholder="Select Name"
    [overlaySettings]="customOverlaySettings">
  <igx-select-item *ngFor="let item of namesArray" [value]="item"

    [ngClass] = "{'w420': item.hasW }"

    >{{ item.name }}</igx-select-item>
</igx-select>