Menu
I want to display the content of a templated webpage inside an iframe. But after loading the content the template doesn't get interpolated by angular. Is it because the change detection system? Could it be achieved some other way?
@Component({
selector: 'my-app',
template : `<iframe [src]="template" width="100%" height="300px"></iframe>`
})
export class App {
template: string = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Page title</title>
</head>
<body>
<p>{{strings[0]}}</p>
<p>{{strings[1]}}</p>
<p>{{strings[2]}}</p>
</body>
</html>
`;
strings: string[] = ['first element', 'second element', 'third element'];
constructor(){
this.template = 'data:text/html;charset=utf-8,' + encodeURI(this.template);
}
}
bootstrap(App)
http://plnkr.co/edit/mWrqv1?p=preview
It doesn't seem to work either using innerHtml binding:
@Component({
selector: 'my-app',
template : `<div [innerHtml]="template"></div>`
})
export class App {
template: string = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Page title</title>
</head>
<body>
<p>{{strings[0]}}</p>
<p>{{strings[1]}}</p>
<p>{{strings[2]}}</p>
</body>
</html>
`;
strings: string[] = ['first element', 'second element', 'third element'];
}
bootstrap(App)
http://plnkr.co/edit/wscpSR?p=preview
655
In Angular, you can use interpolation syntax for data binding for an expression as {{ expression}} . You can use inline expression or member variable inside {{ }} interpolation operator. Sometimes, you would like to use different interpolation characters instead of {{ }} for data binding. For example [ expession ].
To avoid issues, it is highly recommended not to use function calls in Angular template expressions. Instead, you can: use pure pipes to let Angular know that execution of a pipe can be skipped safely if the pipe's input does not change.
Interpolation refers to embedding expressions into marked up text. By default, interpolation uses the double curly braces {{ and }} as delimiters. Angular replaces currentCustomer with the string value of the corresponding component property.
String Interpolation in Angular 8 is a one-way data-binding technique that is used to transfer the data from a TypeScript code to an HTML template (view). It uses the template expression in double curly braces to display the data from the component to the view.
you should use [srcdoc]
template: `<iframe id="{{patternId}}" [srcdoc]="srcdoc" > </iframe>`,
to pass the content you should use the DomSanitizationService to be able to pass script, form elemet.
constructor(private sanitizer: DomSanitizationService) {}
ngOnInit():any {
this.srcdoc = this.sanitizer.bypassSecurityTrustHtml(this.data.patternSource);
}
see https://angular.io/docs/ts/latest/guide/security.html#!#xss
98
[src]="template" and [innerHtml]="template" generally doesn't trigger any interpolation or component or directive instantiation. The behavior you describe is therefore expected and as designed.
Interplation is only triggered by HTML and bindings that are added to the template directly.
You can load a different Angular application inside the <iframe> and use postMessage to pass data between the main application and the <iframe>
If it is only for one-time interpolation, you can use TypeScripts string interpolation like
export class App {
template: string = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Page title</title>
</head>
<body>
<p>${strings[0]}</p>
<p>${strings[1]}</p>
<p>${strings[2]}</p>
</body>
</html>
`;
strings: string[] = ['first element', 'second element', 'third element'];
constructor(){
this.template = 'data:text/html;charset=utf-8,' + encodeURI(this.template);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
