Text Placeholder

An angular directive that shows a Text Placeholder when the image src is absent or fails to load

• uses renderer2, will work in serverside rendering
• computes a two lettered text given a name or string from the image alt property
• will generate a placeholder if the image link is broken or empty

Preview

Installation

npm install --save ngx-text-placeholder

Usage

import

import { TextPlaceholderDirective } from 'ngx-text-placeholder';

@NgModule({
  declarations: [
    ...
    TextPlaceholderDirective
  ],
  ...
})

template usage

<img textPlaceholder alt="Angular Logo" src="https://via.placeholder.com/160" [size]="45" (loadError)="this.onLoadError($event)">