Question: 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?

Answer: 
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.

```html
<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.

```js
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](https://stackblitz.com/edit/angular-ivy-dynamic-components?file=src%2Fapp%2Fapp.component.ts).

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.
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>