How to dynamically load components in Angular 12

Question

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

}

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#createcomponent — yurzui
– yurzui, Commented Nov 7, 2021 at 19:09
You can follow also this: github.com/danmt/dynamic-component-loader — Andrea Colleoni
– Andrea Colleoni, Commented Jan 17, 2022 at 11:10

Henrique Milli · Accepted Answer · 2021-11-08 06:36:07Z

4

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

To pass the class directly, one should use v13.

answered Nov 8, 2021 at 6:36

Henrique Milli

1781 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to dynamically load components in Angular 12

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related