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 ponent and trying to pass it directly, because also in the docs it says:

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

But then why my piler is plaining. From my understating of the spec, the following is the remended solution.

  loadMore() {
    const viewContainerRef = this.resultArea.viewContainerRef;
    const ponentRef = 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, ponentType, 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-gridponent';
import { ResultAreaDirective } from '../result-area.directive';

@Component({
  selector: 'app-search-filters',
  templateUrl: './search-filtersponent.html',
  styleUrls: ['./search-filtersponent.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 ponentRef = viewContainerRef.createComponent<RecentGridComponent>(factory)
  }

}

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 ponent and trying to pass it directly, because also in the docs it says:

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

But then why my piler is plaining. From my understating of the spec, the following is the remended solution.

  loadMore() {
    const viewContainerRef = this.resultArea.viewContainerRef;
    const ponentRef = 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, ponentType, 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.ponent';
import { ResultAreaDirective } from '../result-area.directive';

@Component({
  selector: 'app-search-filters',
  templateUrl: './search-filters.ponent.html',
  styleUrls: ['./search-filters.ponent.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 ponentRef = viewContainerRef.createComponent<RecentGridComponent>(factory)
  }

}

• javascript
• angular
• typescript

• 4 The doc you're reading is for v13.0.0, Update your Angular to 13 version and it should solve your issue. Or read doc for 12 version v12.angular.io/api/core/ViewContainerRef#createponent – yurzui Commented Nov 7, 2021 at 19:09
• 1 You can follow also this: github./danmt/dynamic-ponent-loader – Andrea Colleoni Commented Jan 17, 2022 at 11:10

1 Answer 1

As pointed out by yurzui, the correct spec for v12 is here

To pass the class directly, one should use v13.