Having some issues with Angular 2, im making a component that has a iframe and sets the source from the input. However when it loads, it hits onLoad twice, one with src='' and another with the actual input url.
I cant seem to figure out how to hook the url up for the iframe when it gets put into the view.
export class ExternalComponent implements OnInit {
@Input()
url: string;
private src: any;
constructor(private sanitizer: DomSanitizer) {
}
ngOnInit()
{
this.src = this.sanitizer.bypassSecurityTrustResourceUrl(this.url)
}
onLoad() {
}
}
Html:
<iframe [src]="src" frameBorder="0" (load)="onLoad()"></iframe>
Reproduction: http://plnkr.co/edit/Dnpmv6X2IO3WGQAg0372?p=preview
Thanks
You could try an attribute binding, which isn't added at all if the value is null
<iframe [attr.src]="src ? src = null" frameBorder="0" (load)="onLoad()"></iframe>
update
As explained in https://stackoverflow.com/a/15880489/217408
when the event handler is added to the element before the <iframe> is added to the DOM. This seems to be what Angular is doing.
Add event handler imperatively after the element was added to the DOM
Ignore events while url is null
ngOnInit()
{
this.src = this.sanitizer.bypassSecurityTrustResourceUrl(this.url)
}
This is wrong code if use like this iframe will load more time .
ts file
ngOnInit()
{
this.src = this.url;
}
make html page like this (use pipe)
<iframe [src]="src| safe" ></iframe>
pipe file
import { DomSanitizer} from '@angular/platform-browser';
constructor(private sanitizer:DomSanitizer){
return this.sanitizer.bypassSecurityTrustResourceUrl(value);
Using debugger I found out that event.target.src could provide the solution. The first time it runs, it is an empty string "". The second time the value is the image url. So, in my case it works like that:
onLoad(event: any) {
if (event.target.src) {
//do some stuff here
}
}