Angular: добавить динамически созданный компонент как дочерний элемент целевого элемента

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

1. Обеспечение добавления импорта (CommonModule, MatIconModule, MatButtonModule) к компоненту, который будет отображаться динамически.

2. Использование метода setInput для создания привязки, необходимой для компонента angular, иначе привязка не будет работать для @Input.

3. Запуск обнаружения изменений дочернего компонента, чтобы изменения компонента были обнаружены, с помощью componentRef.changeDetectorRef.detectChanges();

визуализированный компонент

import { CommonModule } from '@angular/common';
import { Component, Input } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';

@Component({
  selector: 'app-table-action-container',
  standalone: true,
  imports: [CommonModule, MatIconModule, MatButtonModule],
  template: `
  <button mat-button color = "primary" *ngIf = "show">
    asdf
    <mat-icon color = "primary"></mat-icon>
  </button>
  <button mat-button color = "primary" *ngIf = "!show">
    qwer
    <mat-icon color = "primary"></mat-icon>
  </button>
  `,
  styleUrl: './table-action-container.component.scss',
})
export class TableActionContainerComponent {
  @Input() show = false;
}

директива

import {
  ApplicationRef,
  ComponentRef,
  Directive,
  ElementRef,
  Input,
  Renderer2,
  createComponent,
} from '@angular/core';
import { TableActionContainerComponent } from './table-action-container/table-action-container.component';

@Directive({
  selector: '[appTableActions]',
  standalone: true,
})
export class TableActionsDirective {
  @Input() show = false;
  constructor(
    private _appRef: ApplicationRef,
    private _renderer: Renderer2,
    private _elementRef: ElementRef
  ) {}

  ngOnInit() {
    const component = TableActionContainerComponent;
    let componentRef: ComponentRef<any> = createComponent(component, {
      environmentInjector: this._appRef.injector,
    });
    componentRef.setInput('show', this.show);

    this._renderer.appendChild(
      this._elementRef.nativeElement as HTMLElement,
      componentRef.location.nativeElement
    );
    componentRef.changeDetectorRef.detectChanges();
  }
}

HTML-фрагмент

  ...
  <ng-container matColumnDef = "symbol">
    <th mat-header-cell *matHeaderCellDef>Action</th>
    <td
      mat-cell
      *matCellDef = "let element;let index = index"
      appTableActions
      [show] = "index % 2 === 0"
    ></td>
  </ng-container>
  ...

Демо-версия Stackblitz