import { HttpClient } from '@angular/common/http' ; import { Directive , EventEmitter , Input , Output } from '@angular/core' ; import { Subscription } from 'rxjs' ; @ Directive ( ) export abstract class ContentRenderer { private documentFetchSubscription : Subscription ; @ Input ( ) set url ( value ) { if ( value ) { this . fetchDocument ( value ) ; } } @ Input ( ) set content ( value ) { if ( value ) { this . updateDocument ( value ) ; } } @ Output ( ) contentRendered = new EventEmitter < HTMLElement > ( ) ; abstract updateDocument ( content ) ; abstract showError ( url , error ) ; constructor ( protected http ) { } protected fetchDocument ( url ) { if ( this . documentFetchSubscription ) { this . documentFetchSubscription . unsubscribe ( ) ; } this . documentFetchSubscription = this . http . get ( url , { responseType : 'text' } ) . subscribe ( response => { this . updateDocument ( response ) ; } , error => { this . showError ( url , error ) ; } ) ; } protected destroy ( ) { this . documentFetchSubscription . unsubscribe ( ) ; } }