Как вставить динамический компонент внутри элемента в Angular

Насколько я понимаю из вопроса, вот решение, которое можно найти в файле .ts.

this.contentFromAPI = //your data from API here;

const parser = new DOMParser();
const doc = parser.parseFromString(this.contentFromAPI, 'text/html');

// Get the element at the 5th position
//add logic to find middle node here instead of 4
const targetElement = doc.body.childNodes[4];

const componentElement = document.createElement('your-dynamic-component');


targetElement.parentNode.insertBefore(componentElement, targetElement);

// Update the contentFromAPI with the modified HTML structure
this.contentFromAPI = doc.body.innerHTML;

надеюсь, это поможет :)

Внутри innerHTML можно вставить компонент Angular, но следует отметить, что элементы, вставленные таким образом, находятся вне контекста Angular, и обнаружение изменений не будет работать, поэтому он будет вести себя как обычный элемент HTML. Лучше искать альтернативные подходы и не использовать innerHTML. Ниже приведен пример, подчеркивающий мою точку зрения о том, что обнаружение изменений не работает внутри InternalHTML.

полный код

import {
  ApplicationRef,
  Component,
  Renderer2,
  ViewChild,
  ViewContainerRef,
  createComponent,
} from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { SafeHtmlPipe } from './safe-html.pipe';
import { CommonModule } from '@angular/common';
import { DynamicComponent } from './app/dynamic/dynamic.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [SafeHtmlPipe, CommonModule, DynamicComponent],
  template: `
    <div [innerHTML] = "contentFromAPI | safeHtml" #articleContent></div>
  `,
})
export class App {
  @ViewChild('articleContent', { read: ViewContainerRef })
  private articleContent!: ViewContainerRef;
  name = 'Angular';
  contentFromAPI = `
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5. insert here!</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <p>10</p>
  `;

  constructor(
    private renderer2: Renderer2,
    private applicationRef: ApplicationRef
  ) {}

  ngAfterViewInit() {
    this.addElementToTemplate();
  }

  private addElementToTemplate() {
    const environmentInjector = this.applicationRef.injector;
    const componentRef = createComponent(DynamicComponent, {
      environmentInjector,
    });
    const insertElement = this.articleContent.element.nativeElement;
    console.info(insertElement);
    this.renderer2.appendChild(
      insertElement.children[4],
      componentRef.location.nativeElement
    );
    this.articleContent.createComponent(DynamicComponent, {
      index: 0,
    });
    componentRef.hostView.detectChanges();
  }
}

bootstrapApplication(App);

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