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]
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>`
}
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;
document.getElementById('titlebar').innerHTML is not supposed to be used in angular, since it has other ways to bind data
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
