How to create angular dynamic component based on input parameters

Question

I'm creating a component for typography, and I'd like to have different variants of typography classes and the way I create that component:

Component definition example

<typography variant="headline1" component="h1">
    hello h1
</typography>

output example

<h1 class="mat-headline-1">
    hello h1
</h1>

I can't figure out how to dynamically generate the component based on the component input or access the defined content

 const factory = this.factoryResolver.resolveComponentFactory('p');
    const component = factory.create(this.rootViewContainer.parentInjector);
    this.rootViewContainer.insert(component.hostView);