AG-GRID angular material component not working when using external html template

Question

I am trying to implement an angular material select component in the AG-GRID as per the example described here

However when I click on the cell that should make the select appear, it does not appear and in the console the following error appears:

core.js:4002 ERROR TypeError: Cannot read property 'element' of undefined
at mat-select.component.ts:37

This corresponds to the following method in the MatSelectComponent:

// dont use afterGuiAttached for post gui events - hook into ngAfterViewInit instead for this
ngAfterViewInit() {
    window.setTimeout(() => {
        this.group.element.nativeElement.focus();
    });
    this.selectFavouriteVegetableBasedOnSelectedIndex();
}

This component has been copied exactly from the example given, except that I put the template and styles in their own HTML/SCSS files respectively.

@Component({
  selector: 'radio-cell',
  template: './mat-select.component.html'
  styles: ['./mat-slect.component.scss']
})

However, when I include the HTML template within the component like in the example it works!

@Component({
  selector: 'radio-cell',
  template: `
  <mat-card>
    <div class="container" #group tabindex="0" (keydown)="onKeyDown($event)">
      <mat-form-field>
        <mat-select panelClass="ag-custom-component-popup" [(ngModel)]="favouriteVegetable">
          <mat-option *ngFor="let vegetable of vegetables" [value]="vegetable">
            {{ vegetable }}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>
  </mat-card>
  `,
  styles: ['./mat-slect.component.scss']
})

Is there any explaination of this behaviour or way around putting all this HTML into the component?

EDIT 1: The component includes the 'group' template reference variable in the component like below, so should it not be available to the ngAfterViewInit() method?

    @ViewChild("group", { read: ViewContainerRef, static: true })
    public group;

Rachid Oussanaa Rachid Oussanaa · Accepted Answer · 2020-05-28T15:48:02

Your error Cannot read property 'element' of undefined comes from the fact that this.group is undefined because angular tries to query it in the template but doesn't find it <div class="container"#grouptabindex="0" (keydown)="onKeyDown($event)">

AG-GRID angular material component not working when using external html template

1 Answers