Angular 9: Как отображать HTML / CSS с атрибутами данных с помощью DomSanitizer

Question

Итак, приложение получает HTML и CSS из API:

<div class="top"></div>
        <div class="bottom"></div>

        <div class="header">
            <div class="operator">
                <img src="{{selectedOperator.image}}">
            </div>
            <span class="title">{{headline}}</span>
        </div>

        <div class="bubble">
            {{subhead}}
        </div>

        <div class="btn">
            Подробнее
        </div>

.templ {
            display: flex;
            flex-direction: column;

            background: blue;

            border-top-left-radius: 3rem;
            border-bottom-right-radius: 3rem;

            position: relative;

            padding-bottom: 2rem;

            .top {
                display: block;

                position: absolute;

                top: -3rem;
                right: 0;

                width: 3rem;
                height: 3rem;

                background: blue;

                &:before {
                    content: '';

                    display: block;

                    position: absolute;
                    bottom: 0;
                    right: 0;
                    border-radius: 50rem;

                    background: #fff;

                    height: 6rem;
                    width: 6rem;
                }
            }

            .bottom {
                display: block;

                position: absolute;

                bottom: -3rem;
                left: 0;

                width: 3rem;
                height: 3rem;

                background: blue;

                &:before {
                    content: '';

                    display: block;

                    position: absolute;
                    top: 0;
                    left: 0;
                    border-radius: 50rem;

                    background: #fff;

                    height: 6rem;
                    width: 6rem;
                }
            }

            .header {
                display: flex;
                flex-direction: row;
                align-items: flex-end;

                margin-top: -2rem;

                padding-left: 1rem;
                padding-right: 1rem;

                margin-bottom: 2rem;

                .title {
                    margin-left: 1rem;

                    display: block;

                    color: #fff;
                    font-size: 1.25rem;
                    font-weight: 600;
                    line-height: 1.2;

                    max-width: calc(100% - 1rem);
                }

                .operator {
                    display: block;

                    width: 50%;

                    border-radius: 50rem;

                    padding: 0.5rem;


                    position: relative;
                    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);

                    &:before {
                        content: '';

                        display: block;

                        position: absolute;
                        top: 0;
                        left: 0;
                        z-index: 1;

                        background: linear-gradient(red, blue);

                        width: 100%;
                        height: 100%;
                        border-radius: 50rem;
                    }

                    img {
                        height: 100%;
                        width: 100%;

                        border-radius: 50rem;

                        position: relative;
                        z-index: 2;
                    }
                }
            } // .header

            .bubble {
                display: block;

                background: #fff;
                border-radius: 0.5rem;

                margin-bottom: 0.5rem;

                padding: 0.5rem 1rem;
                line-height: 1.3;

                width: calc(100% - 3rem);

                margin-left: 2rem;
                margin-right: 1rem;

                position: relative;

                &:before {
                    content: '';

                    height: 1rem;
                    width: 1.5rem;

                    display: block;

                    background: #fff;

                    position: absolute;
                    left: -0.5rem;
                    top: 50%;
                    transform: translateY(-50%) rotate(45deg);
                    border-radius: 0.25rem;
                }

                &:last-child {
                    margin-bottom: 0;
                }
            } // .bubble

            .btn {
                display: block;

                width: calc(100% - 2rem);
                margin-left: auto;
                margin-right: auto;

                background: orange;
                box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.5);

                color: black;
                font-size: 1rem;
                font-weight: 500;

                position: absolute;
                bottom: -1rem;
                left: 0;
                right: 0;
            } // .btn
        }

Затем приложение сохраняет данные внутри компонента:

export class AdvertisementComponent implements OnInit {

    templateHtml = here goes html from api
    templateCss = here goes css from api

    headline: string = ''

    constructor(
        private sanitizer: DomSanitizer
    ) {}

    transform(style) {
        return this.sanitizer.bypassSecurityTrustHtml(style)
    }
}

Затем приложение должно их отобразить :

    <div class="templ" [innerHtml]="transform(templateHtml)"></div>

Итак: Внутри шаблона Html есть данные: {{заголовок}} , {{subhead}} и {{ selectedOperator.image}}

Проблема и вопросы:

1. Мне нужно добавить CSS код из API в Angular View
2. Мне нужно продезинфицировать HTML, но сохранить динамику c теги данных рабочие

Answer 1

Итак, решение:

• Сохранить html в виде строки
• Заменить строку новыми данными
• Обновить строку