Create background-image directive

Question

I have an image directive, where if an image does not load I display a default image.

Directive:

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

@Directive({
  selector: 'img[default]',
  host: {
    '(error)':'updateUrl()',
    '(load)': 'load()',
    '[src]':'src'
   }
})
export class ImagePreloadDirective {
  @Input() src:string;
  @Input() default:string;
  @HostBinding('class') className

  updateUrl() {
    this.src = this.default;
    this.className = 'image-default';
  }
  load(){
    //this.className = 'image-default';
  }
}

Use:

<img 
    [src]="'assets/imgs/img-name.png"
    default="assets/imgs/image-default.png">

However, I would like to do the same for another situation where background-image.

<figure [ngStyle]="{'background-image': 'url(assets/imgs/teste_344x120-.jpg)'}"></figure>

However, I am unable to change or adapt the directive I already have to work when the background-image not carry.

Answer 1

Dude, I currently use this code to put a background on a page... as in your situation, if I don’t find what I want I use a default :

  getMyStyles() {
    const myStyles = {
      'background-image': !this.imgBackground
        ? 'url(\'/assets/images/background/1.png\')'
        : 'url(' + this.imgBackground + ')'
    };
    return myStyles;
  }

And in html you would use this function :

<div [ngStyle]="getMyStyles()">

works perfectly here.