Construire un sélecteur de composants via un @Input

Il peut être plus judicieux d'utiliser Renderer2 au lieu de @epsilon -s answer.

Utilisez-le comme:

  constructor(private renderer: Renderer2, private el: ElementRef) {}

  ngOnInit() {
    const icon = this.renderer.createElement('i-chevron-down')

    this.renderer.appendChild(this.el.nativeElement, icon)
  }

Et vous pouvez bien sûr ajouter n'importe quelle variable à cette chaîne. N'oubliez pas non plus de supprimer l'élément dans le cycle de vie OnDestroy

Votre cas d'utilisation serait vraiment simple si vous utilisiez une approche css ou ligature , mais comme votre bibliothèque a 1 comp par icône et il n'y a fondamentalement pas d'interface commune entre eux, AFAIK il y a pratiquement aucun moyen de mapper une chaîne à sa classe de composant correspondante.

L'approche suggérée dans les commentaires ne fonctionnera pas, car angular ne créera pas d'instances de composant à partir de HTML purifié .

Vous pouvez essayer l'idée suivante: au lieu de passer le nom de l'icône, vous pouvez passer un modèle avec l'icône souhaitée et l'intégrer dans le composant. Cela peut être fait comme suit:

<foo-header>
  <i-chevron-down header-icon></i-foo-icon>
</foo-header>

content-header.component.html

<ng-content select="[header-icon]"></ng-content>

foo.component.html

@Component({
  selector: 'foo-header'
})
export class ContentHeaderComponent {}

Une autre approche consisterait à transclure directement le balisage de l'icône dans le composant:

<foo-header [iconTemplate]="iconRef"></foo-header>
<ng-template #iconRef>
  <i-chevron-down></i-foo-icon>
</ng-template>

<ng-container *ngIf="iconTemplate">
  <ng-container [ngTemplateOutlet]="iconTemplate"></ng-container>
</ng-container>

foo.component. html

@Component({
  selector: 'foo-header'
})
export class ContentHeaderComponent {
  @Input() iconTemplate: TemplateRef<any>;
}

Vous pouvez en savoir plus sur ces approches et leurs avantages / inconvénients dans cet article .

Il n'est pas possible de créer dynamiquement un sélecteur d'une composante angulaire en angulaire, car Angular doit compiler cet élément. Vous pouvez cependant le faire pour les composants Web, en compilant votre composant angulaire en éléments angulaires, puis en insérant dynamiquement ces composants Web dans le DOM.