0

Dom object have that i parse from html string using DOMParser and edit this html

domObj= '
<html> 
<head>
<style>
</style>
</head>
<body>
<p>this is a paragraph</p>
</body>
</html>'

**In component.html **

<div [innerHTML]="domObj"></div>

I am getting result in browser [object HTMLDocument]

3 Answers 3

1

What you tried to do was correct, but you have to use tild (`) instead of single quotes ('). Check the stackblitz implementation Here

You can refer here for template literals Here

Solution -1. Using single quotes ( ' )

domObj=
    '<html>'+ 
    '<head>'+
    '<style>'+
    '</style>'+
    '</head>'+
    '<body>'+
    '<p>this is a paragraph</p>'+
    '</body>'+
    '</html>'
}

Solution - 2. Using tild ( ` )

domObj=`
    <html> 
    <head>
    <style>
    </style>
    </head>
    <body>
    <p>this is a paragraph</p>
    </body>
    </html>`
}
Sign up to request clarification or add additional context in comments.

Comments

0

See DOMParser

const domObj= '<html> \
<head> 
<style> 
</style> 
</head> 
<body> 
<p>this is a paragraph</p> 
</body> 
</html>';

Get the document object

let doc = parser.parseFromString(domObj, "application/xml")

Construct the XML string

let xml = new XMLSerializer().serializeToString(doc.documentElement);

Select and set innerHTML

document.getElementById('titlebar').innerHTML = xml;

3 Comments

FYI document.getElementById('titlebar').innerHTML is not supposed to be used in angular, since it has other ways to bind data
My mistake, I overlooked the tags in the question. I didn't realize this was pertaining to Angular.
thanks @laujonat this solution is worked for me but one problem is there it taking all as string i mean it not taking style as style elements . body elements not taking class from style tag
0

Use the single backtick :

domObj= `<html> 
<head>
<style>
</style>
</head>
<body>
<p>this is a paragraph</p>
</body>
</html>`

ex. https://stackblitz.com/edit/angular-fkv6bw?file=src/app/app.component.ts

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.