title: How to dynamically load components in Angular 12
body: <p>The path I learned <a href="https://angular.io/guide/dynamic-component-loader#dynamic-component-loader" rel="nofollow noreferrer">here</a> in the angular docs, is to call createComponent() on a container reference.</p>
  <p>Instead of using an input like in the example, I'm importing a component and trying to pass it directly, because <a href="https://angular.io/api/core/ViewContainerRef#createcomponent" rel="nofollow noreferrer">also in the docs</a> it says:</p>
  <blockquote>
  <p>Angular no longer requires component factories to dynamically create components. Use different signature of the createComponent method, which allows passing Component class directly.</p>
  </blockquote>
  <p>But then why my compiler is complaining.
  From my understating of the spec, the following is the recommended solution.</p>
  <pre><code>  loadMore() {
      const viewContainerRef = this.resultArea.viewContainerRef;
      const componentRef = viewContainerRef.createComponent&lt;RecentGridComponent&gt;(RecentGridComponent);
    }
  </code></pre>
  <p>But I get</p>
  <blockquote>
  <p>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)</p>
  </blockquote>
  <p>Instead, I had to instantiate a factory (full code)</p>
  <pre><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&lt;RecentGridComponent&gt;(factory)
    }
  
  }
  </code></pre>