Display string that contains HTML code in angular 7

Question

I have a string that contains the following HTML code:

             <div>
                <TextSubtitle [color]="'#B3B4B4'" [bold]="'true'">Datos Personales del Solicitante</TextSubtitle>
                <div style="margin-top: 20px;display: flex;justify-content: space-between">
                    <InputItem style="width: 47%" [label]="'Primer nombre *'"></InputItem>
                    <InputItem style="width: 47%" [label]="'Segundo nombre *'"></InputItem>
                </div>
                <div style="margin-top: 10px;display: flex;justify-content: space-between">
                    <InputItem style="width: 47%" [label]="'Apellido paterno *'"></InputItem>
                    <InputItem style="width: 47%" [label]="'Apellido materno *'"></InputItem>
                </div>
                <div style="margin-top: 10px;display: flex;justify-content: space-between">
                    <InputItem style="width: 47%" [label]="'Fecha de nacimiento *'"></InputItem>
                    <InputItem style="width: 47%" [label]="'Género *'"></InputItem>
                </div>
                <div style="margin-top: 10px;display: flex;justify-content: space-between">
                    <InputItem style="width: 47%" [label]="'Ocupación *'"></InputItem>
                    <InputItem style="width: 47%" [label]="'Dependientes económicos *'"></InputItem>
                </div>
                <div style="margin-top: 10px;display: flex;justify-content: space-between">
                    <InputItem style="width: 47%" [label]="'Estado civil *'"></InputItem>
                    <InputItem style="width: 47%" [label]="'Número de hijos *'"></InputItem>
                </div>
                <div style="margin-top: 10px;display: flex;justify-content: space-between">
                    <InputItem style="width: 47%" [label]="'RFC *'"></InputItem>
                    <InputItem style="width: 47%" [label]="'CURP *'"></InputItem>
                </div>
            </div>

note: InputItem is a angular component I build

I am trying to insert the entire string as HTML code in my HTML file

typescript file:

ngOnInit() {
    this.doc = new DOMParser().parseFromString(myString, "text/html");
  }

HTML file:

<div>
    {{doc.firstChild.innerHTML}}
</div>

this will print the actually HTML code as a string on screen.

vadimk7 · Accepted Answer · 2020-07-13 20:16:05Z

1

You need to use DomSanitizer and tell angular your content is safe with bypassSecurityTrustHtml method. Also you need to replace firstChild.innerHTML with doc.body.outerHTML if you would like to render the whole document.

Here is the sample on StackBlitz

edited Jul 13, 2020 at 20:16

answered Jul 13, 2020 at 14:13

vadimk7

8,4071 gold badge15 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

I'm not human Over a year ago

[innerHTML]= will only display the first html element with no styles

vadimk7 Over a year ago

@I'mnothuman sure, it's because you use firstChild.innerHTML. Please, see my updated answer with an example on stackblitz

Collectives™ on Stack Overflow

Display string that contains HTML code in angular 7

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related