El camino que aprendí aquí en los documentos angulares es llamar a createComponent() en una referencia de contenedor.

En lugar de usar una entrada como en el ejemplo, estoy importando un componente y tratando de pasarlo directamente, porque también en los documentos dice:

Angular ya no requiere fábricas de componentes para crear componentes dinámicamente. Use una firma diferente del método createComponent, que permite pasar la clase Component directamente.

Pero entonces, ¿por qué se queja mi compilador? Desde mi comprensión de la especificación, la siguiente es la solución recomendada.

 loadMore() { const viewContainerRef = this.resultArea.viewContainerRef; const componentRef = viewContainerRef.createComponent<RecentGridComponent>(RecentGridComponent); }

pero lo consigo

El argumento de tipo 'typeof RecentGridComponent' no se puede asignar al parámetro de tipo 'ComponentFactory'. Al tipo 'typeof RecentGridComponent' le faltan las siguientes propiedades del tipo 'ComponentFactory': selector, componentType, ngContentSelectors, entradas y 2 más.ts(2345)

En cambio, tuve que instanciar una fábrica (código completo)

 import { Component, ComponentFactoryResolver, OnInit, ViewChild } from '@angular/core'; import { RecentGridComponent } from '../recent-grid/recent-grid.component'; import { ResultAreaDirective } from '../result-area.directive'; @Component({ selector: 'app-search-filters', templateUrl: './search-filters.component.html', styleUrls: ['./search-filters.component.sass'] }) export class SearchFiltersComponent implements OnInit { @ViewChild(ResultAreaDirective) resultArea!: ResultAreaDirective constructor(private resolver: ComponentFactoryResolver) { } ngOnInit(): void { } loadMore() { const viewContainerRef = this.resultArea.viewContainerRef; const factory = this.resolver.resolveComponentFactory(RecentGridComponent) const componentRef = viewContainerRef.createComponent<RecentGridComponent>(factory) } }