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 { TextPlaceholderModule } from 'ngx-text-placeholder';

@NgModule({
  ...
  imports: [
    TextPlaceholderModule
  ],
  ...
})

template usage

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