+1 vote
When developing an Angular 9 application, I encountered a problem with displaying HTML and CSS obtained from a third-party server.

To the point:

Inside the application there is a component with advertising blocks.
Each ad unit consists of several parts that can be dynamically changed: Properties of the selectedTemplate: AdvertTemplate = null
selectedCharacter: AdvertCharacter = null
headline: string = ''
description: string = ''

selectedTemplate - object with html and css inside
selectedCharacter - object with the path to the image inside
headline - headline string
description - the string with the description From the API, the application gets an array with AdvertTemplate objects and a separate array with AdvertCharacter AdvertTemplate, roughly looks like this (but can be different): The object received from thehtml server:
{{ title }}

.tpl {
display: flex;

.tpl__head {
font-size: 2rem;

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

border-radius: 50rem;
} The user selects the desired template from pictures saved in advance, enters text and selects AdvertCharacter. The application should show real-time changes in the template, character, and headings. The first path I took:
I was getting all the templates, and when the user selected the desired template, I used DomSanitizer to insert the HTML into the block I wanted with [innerHTML]. The problem: all variables inside {{ }} were displayed as text and the application couldn't interact with them. I didn't even get to CSS.
The second way I looked at SO:
I tried to use the Dynamic component loader, but could not figure out how the renderer works. At different angles, the console threw different kinds of errors.
--- Question:Is there any way to build a template, change the data in it without dancing with tambourine?

1 Answer

0 votes
You need to use the Jit Compiler, at runtime, (will greatly increase the size of the bundle, preferably put in lazy)
Example on stackblitz : https://stackblitz.com/github/lyczos/angular-dynam...