typescript - Cambiar plantilla html, scss dinámicamente en angular

Tengo un componente de encabezado como en el siguiente formato:

app-header (folder)
     classic (folder)
         app-header.component.html
         app-header.component.scss

    elegant (folder)
         app-header.component.html
         app-header.component.scss

    simple (folder)
         app-header.component.html
         app-header.component.scss

 app-header.component.ts

Quiero cambiar dinámicamente entre estas carpetas de plantillas (clásica, elegante, simple). Es decir, obtener el nombre de la carpeta de la plantilla desde la base de datos a través de una solicitud HTTP y cargar el HTML y el estilo de esa carpeta respectivamente.

Lo he hecho estableciendo el nombre de la carpeta en una variable de entorno y cargando según eso. ¿Cómo podría establecer esa variable de entorno llamando a una API y cargar el HTML y los estilos según eso?

Lo siguiente es el código que intenté cargar desde la variable de entorno en app-header-component.ts

import { Component, OnInit } from '@angular/core';
import { ConfigService } from './../config.service';
import { environment } from './../../environments/environment';

let theme_name  = environment.theme_name;

const header      = require('./' + theme_name + '/app- 
header.component.html');

const style     = [require('./' + theme_name + '/app- 
header.component.scss')];

@Component({
    selector: 'app-header',
    template: header,
    styles: style
})

Respuesta #1

El componente padre podría hacer un seguimiento del tema y dejar que decida qué componente de encabezado renderizar.

<app-header-classic *ngIf="theme === 'classic'"></app-header-classic>
<app-header-elegant *ngIf="theme === 'elegant'"></app-header-elegant>
<app-header-simple *ngIf="theme === 'simple'"></app-header-simple>

Respuesta #2

¿Has probado algo así?

@Component({
  selector: 'selector',
  templateUrl: environment.template_path,
  styleUrls: [environment.style_path]
})