How to apply random component to html Angular

Issue

I wonder how to apply a random component to an html in Angular. Let's presume, that I have a three components with different html-css:

export class Component1{}
export class Component2{}
export class Component3{}

I want the html of app root to have one of those component's element inside. app root HTML:

<app-randomComponent></app-randomComponent>

The main idea was to store all Components inside data structure and get it from there. What's the propper way?

Solution

You should likely go with the NgComponentOutlet directive.

Template:

<ng-container *ngComponentOutlet="myRandomComponent"></ng-container>

Ts:

const myComponents = [Component1, Component2, Component3]       
myRandomComponent = myComponents[Math.floor(Math.random() * (myComponents.length))]//edited

Answered By - Matthieu Riegler