I have to convert the xml using the xslt in Angular. I got the result for conversion, but when I bind result to div with [innerHTML] an error of [object DocumentFragment] is appearing.
Html code is
<code><div class="body">
<div class="container-fluid p-0">
<div id="xmlcontent" [innerHTML]="xmlcontent">
</div>
<div id="htmlcontent" [innerHTML]="htmlcontent">
</div>
</div>
<button type="button" (click)="convert()">xml to html</button>
<br/>
<button type="button" (click)="getHtmlFile()">html content</button>
</div>
</code>
<code><div class="body">
<div class="container-fluid p-0">
<div id="xmlcontent" [innerHTML]="xmlcontent">
</div>
<div id="htmlcontent" [innerHTML]="htmlcontent">
</div>
</div>
<button type="button" (click)="convert()">xml to html</button>
<br/>
<button type="button" (click)="getHtmlFile()">html content</button>
</div>
</code>
<div class="body">
<div class="container-fluid p-0">
<div id="xmlcontent" [innerHTML]="xmlcontent">
</div>
<div id="htmlcontent" [innerHTML]="htmlcontent">
</div>
</div>
<button type="button" (click)="convert()">xml to html</button>
<br/>
<button type="button" (click)="getHtmlFile()">html content</button>
</div>
TS code is
<code>export class XmlconvertComponent implements OnInit {
_httpClient!: HttpClient;
xmlcontent:any;
htmlcontent: any;
sanitizer!: DomSanitizer;
convert() {
const xml = this.loadXMLDoc("assets/xml/test.xml");
const xsl = this.loadXMLDoc("assets/xml/test.xsl");
const xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
const resultDocument = xsltProcessor.transformToFragment(xml, document);
//document.getElementById("xmlcontent")?.appendChild(resultDocument);
this.xmlcontent=resultDocument;
}
constructor(_httpClient: HttpClient) {
}
ngOnInit(): void {
}
loadXMLDoc(filename: any): any {
const xhttp = new XMLHttpRequest();
xhttp.open("GET", filename, false);
try { xhttp.responseType = 'document' } catch (err) { } // Helping IE11
xhttp.send("");
return xhttp.responseXML;
}
getHtmlFile() {
let path = 'assets/xml/test.html';
this._httpClient.get(path, {responseType: "text"}).subscribe(
data => {
this.htmlcontent = this.sanitizer.bypassSecurityTrustHtml(data);
});
}
</code>
<code>export class XmlconvertComponent implements OnInit {
_httpClient!: HttpClient;
xmlcontent:any;
htmlcontent: any;
sanitizer!: DomSanitizer;
convert() {
const xml = this.loadXMLDoc("assets/xml/test.xml");
const xsl = this.loadXMLDoc("assets/xml/test.xsl");
const xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
const resultDocument = xsltProcessor.transformToFragment(xml, document);
//document.getElementById("xmlcontent")?.appendChild(resultDocument);
this.xmlcontent=resultDocument;
}
constructor(_httpClient: HttpClient) {
}
ngOnInit(): void {
}
loadXMLDoc(filename: any): any {
const xhttp = new XMLHttpRequest();
xhttp.open("GET", filename, false);
try { xhttp.responseType = 'document' } catch (err) { } // Helping IE11
xhttp.send("");
return xhttp.responseXML;
}
getHtmlFile() {
let path = 'assets/xml/test.html';
this._httpClient.get(path, {responseType: "text"}).subscribe(
data => {
this.htmlcontent = this.sanitizer.bypassSecurityTrustHtml(data);
});
}
</code>
export class XmlconvertComponent implements OnInit {
_httpClient!: HttpClient;
xmlcontent:any;
htmlcontent: any;
sanitizer!: DomSanitizer;
convert() {
const xml = this.loadXMLDoc("assets/xml/test.xml");
const xsl = this.loadXMLDoc("assets/xml/test.xsl");
const xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
const resultDocument = xsltProcessor.transformToFragment(xml, document);
//document.getElementById("xmlcontent")?.appendChild(resultDocument);
this.xmlcontent=resultDocument;
}
constructor(_httpClient: HttpClient) {
}
ngOnInit(): void {
}
loadXMLDoc(filename: any): any {
const xhttp = new XMLHttpRequest();
xhttp.open("GET", filename, false);
try { xhttp.responseType = 'document' } catch (err) { } // Helping IE11
xhttp.send("");
return xhttp.responseXML;
}
getHtmlFile() {
let path = 'assets/xml/test.html';
this._httpClient.get(path, {responseType: "text"}).subscribe(
data => {
this.htmlcontent = this.sanitizer.bypassSecurityTrustHtml(data);
});
}
Please note, when i use this code “document.getElementById("xmlcontent")?.appendChild(resultDocument);
“, I got the output, but when I click again the same content is repeated.
Can someone help me to display the conent in
<code><div id="xmlcontent" [innerHTML]="xmlcontent">
</div>
</code>
<code><div id="xmlcontent" [innerHTML]="xmlcontent">
</div>
</code>
<div id="xmlcontent" [innerHTML]="xmlcontent">
</div>
Also one more issue i am facing in getHtmlFile() function.
<code>ERROR TypeError: Cannot read properties of undefined (reading 'get')
</code>
<code>ERROR TypeError: Cannot read properties of undefined (reading 'get')
</code>
ERROR TypeError: Cannot read properties of undefined (reading 'get')
Can help for this issue also