Angular, onLoad function on an iFrame - iframe

Question

I have this iframe working with basic JavaScript:
<iframe id="upload_iframe" name="upload_iframe" onLoad="uploadDone();"></iframe>
Which triggers the method uploadDone(); when the content of the iframe has been loaded.
How do I do the same thing in Angular?. I want to call a function on the controller when the iframe loads, but I haven't seen a ng-onload so far.

Answer 1

Commenting on a year old question.
For cases where there are more than 1 iframes, I needed to bind "onload" events on to.
I did this approach.
Directive
APP.directive('iframeOnload', [function(){
return {
scope: {
callBack: '&iframeOnload'
},
link: function(scope, element, attrs){
element.on('load', function(){
return scope.callBack();
})
}
}}])
Controller
APP.controller('MyController', ['$scope', function($scope){
$scope.iframeLoadedCallBack = function(){
// do stuff
}
}]);
DOM
<div ng-controller="MyController">
<iframe iframe-onload="iframeLoadedCallBack()" src="..."></iframe>
</div>

Answer 2

try defining the function within controller as:
window.uploadDone=function(){
/* have access to $scope here*/
}

Answer 3

For anyone using Angular 2+,
It's simply:
<iframe (load)="uploadDone()"></iframe>
No global function, works with multiple iframe.

Answer 4

For anyone ending up here, the ng-onload plugin is the perfect solution to this issue. It doesn't pollute the global namespace and doesn't require you to create one-off directives when all you want is to call a simple scope function.

Answer 5

for those that inject the iframe dynamically, you could do the following
html...
<div #iframeContainer></div>
ts...
#Component({
selector: 'app-iframe-onload',
templateUrl: './iframe-onload.component.html'
})
export class IframeOnload implements AfterViewInit {
#ViewChild('iframeContainer') iframeContainer: ElementRef;
ngAfterViewInit(): void {
this.injectIframe();
}
private injectIframe(): void {
const container = this.iframeContainer.nativeElement;
const iframe = document.createElement('iframe');
iframe.setAttribute('width', '100%');
iframe.setAttribute('src', 'https://example.com/');
iframe.setAttribute('height', 'auto');
iframe.setAttribute('frameBorder', '0');
iframe.addEventListener('load', this.iframeOnLoadtwo);
container.appendChild(iframe);
}
public iframeOnLoadtwo(): void {
console.log('iframe loaded...');
}
}