HTML <pre> tag with script examples failing to compile in TypeScript / Angular application

Question

Trying to figure out why the following code won't load in my Angular template. Not finding many explanations on how to properly escape this:

<div class="col-4">
    <pre>
        ImageData: object = {
            text: STRING,
            position: STRING,
            color: STRING,
            icon: {
                fa: BOOLEAN,
                url: STRING,
                height: INT,
                width: INT,
                altText: STRING
            }
        }
    </pre>
</div>

Answer 1

you can try

<pre [innerHTML]="'
    ImageData: object = {
        text: STRING,
        position: STRING,
        color: STRING,
        icon: {
            fa: BOOLEAN,
            url: STRING,
            height: INT,
            width: INT,
            altText: STRING
        }
    }'">
</pre>