The path I learned here in the angular docs, is to call createComponent() on a container reference.

Instead of using an input like in the example, I'm importing a component and trying to pass it directly, because also in the docs it says:

Angular no longer requires component factories to dynamically create components. Use different signature of the createComponent method, which allows passing Component class directly.

But then why my compiler is complaining. From my understating of the spec, the following is the recommended solution.

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

But I get

Argument of type 'typeof RecentGridComponent' is not assignable to parameter of type 'ComponentFactory'. Type 'typeof RecentGridComponent' is missing the following properties from type 'ComponentFactory': selector, componentType, ngContentSelectors, inputs, and 2 more.ts(2345)

Instead, I had to instantiate a factory (full code)

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)
  }

}