Правильный путь для рендера HTML/CSS внутри компонента, получаемых с сервера?

Question

[Roman Khegay]

При разработке приложения на Angular 9, я столкнулся с проблемой отображения HTML и CSS, полученного со стороннего сервера.

К сути:

Внутри приложения есть компонент с рекламными блоками.
Каждый рекламный блок состоит из нескольких частей, которые могут динамически изменятся:

Свойства рекламного блока

selectedTemplate: AdvertTemplate = null
selectedCharacter: AdvertCharacter = null
headline: string = ''
description: string = ''

• selectedTemplate - объект, внутри которого html и css
  
• selectedCharacter - объект, внутри которого путь к изображению
  
• headline - строка с заголовком
  
• description - строка с описанием
  

С API приложение получает массив с объектами AdvertTemplate и отдельный массив с AdvertCharacter

AdvertTemplate, примерно выглядит так (но может быть разным):

Объект получаемый с сервера

html:

<div class="tpl">
   <h1 class="tpl__head">{{ title }}</h1>
   <img class="tpl__img" src="{{ img }}">
</div>

css:

.tpl {
    display: flex;
}

.tpl__head {
    font-size: 2rem;
}

.tpl__img {
    display: block;
    width: 10rem;
    height: auto;

    border-radius: 50rem;
}

Пользователь выбирает нужный шаблон по картинкам, заранее сохранённым, вводит текст и выбирает AdvertCharacter. Приложение должно показывать в реальном времени изменение шаблона, характера и заголовков.

Первый путь, по которому я пошёл:

Я получал все шаблоны, и когда пользователь выбирал нужный шаблон, с помощью DomSanitizer вставлял HTML в нужный мне блок с помощью [innerHTML].

Проблема: все переменные внутри {{ }} отображались как текст, и приложение не могло с ними взаимодействовать. До CSS даже не дошёл.

Второй путь, который я искал на SO:

Я попытался использовать Dynamic component loader
, но так и не смог разобраться как же работает рендер. Под разными углами, в консоль вываливались разного вида ошибки.

---
Вопрос: можно ли как-то собирать шаблон, изменять в нём данные без танцев с бубном?

Answer 1

[Александр Мурашкин]

Вам необходимо использовать Jit Compiler, в runtime, (значительно увеличит размер бандла, желательно выносить в lazy)
Пример на stackblitz : https://stackblitz.com/github/lyczos/angular-dynam...