Is there a way to programmatically render a component in Angular?

user_6009213 0
Viewed 4053

As the title says is there a way to programmatically render (into a DOM element) a component in angular?

For example, in React I can use ReactDOM.render to turn a component into a DOM element. I am wondering if it's possible to something similar in Angular?

angular element dom javascript
2 Answers

At first you'll need to have a template in your HTML file at the position where you'll want to place the dynamically loaded component.

<ng-template #placeholder></ng-template>

In the component you can inject the DynamicFactoryResolver inside the constructor. Once you'll execute the loadComponent() function, the DynamicComponent will be visible in the template. DynamicComponent can be whatever component you would like to display.

import { Component, VERSION, ComponentFactoryResolver, ViewChild, ElementRef, ViewContainerRef } from '@angular/core';
import { DynamicComponent } from './dynamic.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent  {
  @ViewChild('placeholder', {read: ViewContainerRef})
  private viewRef: ViewContainerRef;

  constructor(private cfr: ComponentFactoryResolver) {}

  loadComponent() {
    this.viewRef.clear();
    const componentFactory = this.cfr.resolveComponentFactory(DynamicComponent);
    const componentRef = this.viewRef.createComponent(componentFactory);
  }
}

Here is a Stackblitz.

What the loadComponent function does is:

  1. It clears the host
  2. It creates a so called factory object of your component. (resolveComponentFactory)
  3. It creates an instance of your factory object and inserts it in the host reference (createComponent)
  4. You can use the componentRef to, for example, modify public properties or trigger public functions of that components instance.
user_88084960

If you want to render the angular component into a Dom element which is not compiled by angular, Then we can't obtain a ViewContainerRef. Then you can use Angular cdk portal and portal host concepts to achieve this. Create portal host with any DOMElememt, injector, applicationRef, componentFactoryResolver. Create portal with the component class. And attach the portal to host. https://medium.com/angular-in-depth/angular-cdk-portals-b02f66dd020c

user_161232620
Related