image default on error

gistfile1.txt

default-image.directive.ts:

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

@Directive({
    selector: 'img[default]',
})
export class DefaultImageDirective {
    @Input() default: string;

    constructor(private element: ElementRef) { }

    @HostListener('error')
    updateUrl() {
        this.element.nativeElement.attributes['src'].value = this.default;
    }
}

in your file:

  <img height="32" width="32" default="http://www.freebanking.org/avatars/schuler.png" [src]="user.picture" [alt]="user.fullname">