Angular 9 Dynamic selector

 import { Component } from '@angular/core';

@Component({

  selector: 'app-dynamic-component', // Placeholder selector

  template: '', // Optional template, can be empty

})

export class DynamicComponent {

  // Component logic here

}

--------------------

import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef, OnInit } from '@angular/core';

import { DynamicComponent } from './dynamic.component';

import { environment } from 'src/environments/environment';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {

  @ViewChild('dynamicComponentContainer', { read: ViewContainerRef }) dynamicComponentContainer: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  ngOnInit() {

    const selector = environment.name; // Get the selector value from environment.ts

    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);

    const componentRef = this.dynamicComponentContainer.createComponent(componentFactory);

    componentRef.instance.selector = selector; // Pass the selector value to the dynamic component

  }

}

______________

import { Component, Input } from '@angular/core';

@Component({

  template: '',

})

export class DynamicComponent {

  @Input() selector: string;

}