I have a header component structured as follows:
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
I am looking to dynamically switch between the template folders (classic, elegant, simple) based on data retrieved from a database using an HTTP request. I have already set the folder name in an environment variable and loaded the templates accordingly. However, I would like to learn how to set this environment variable by making an API call to further enhance the functionality.
Below is the code snippet I used to load the templates based on the environment variable in 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
})