0

Is there angular way to setup onerror attribute on iframe so I can use angular expressions. I've tried to use this:

<iframe onerror="{{vm.error()}}" ng-src="{{vm.url}}"/>

but got error:

Interpolations for HTML DOM event attributes are disallowed

jcubic
  • 61,973
  • 54
  • 229
  • 402

1 Answers1

-1

With default events you cant. But you can create a directive and assign to the iframe. Then in the logic of the directive , register to the onerror event and write your logic

import { Directive, ElementRef, HostListener, Renderer2, AfterViewInit } 
from '@angular/core';

@Directive({
  selector: '[appFrame]'
})
export class FrameDirective implements AfterViewInit {

 constructor(private iframeEl: ElementRef, private renderer: Renderer2) {
 }

  ngAfterViewInit() {
    this.renderer.listen(this.iframeEl.nativeElement, 'error', () => {
        console.log('error caught in directive');
    });
  }

}
Community
  • 1
  • 1
Suren Srapyan
  • 66,568
  • 14
  • 114
  • 112
  • 1
    Not sure how this was marked as "answer". Can you elaborate just a little bit more? Sample code would help. – U Avalos Dec 01 '16 at 05:56
  • `this.renderer.listen(this.iframeEl.nativeElement, 'error', () => { console.log('error caught in directive'); });` here there is no callback as `error`. It is same implementation as we do with `onload()` function in JS - but done with Directives in Angular - No HTTP response headers are present in `this.iframeEl.nativeElement` to check status. – Mohd Belal May 19 '21 at 04:24