Угловой компонент материала AG-GRID не работает при использовании внешнего шаблона html

Я пытаюсь реализовать угловой компонент выбора материала в AG-GRID в соответствии с описанным примером здесь

Однако, когда я нажимаю на ячейку, в которой должен появиться выбор, она не появляется, и в консоли появляется следующая ошибка:

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

Это соответствует следующему методу в MatSelectComponent:

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

Этот компонент был скопирован в точности из приведенного примера, за исключением того, что я поместил шаблон и стили в их собственные файлы HTML / SCSS соответственно.

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

Однако, когда я включаю HTML-шаблон в компонент, как в примере, он работает!

@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']
})

Есть ли какое-нибудь объяснение такого поведения или способа помещения всего этого HTML в компонент?

РЕДАКТИРОВАТЬ 1: компонент включает в себя ссылочную переменную шаблона 'group' в компоненте, как показано ниже, поэтому должна ли она быть недоступна для метода ngAfterViewInit ()?

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