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 }}
css:
.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?
