Generic component to show app-standardized error messages

display-error.component.ts

import { Component, Optional } from '@angular/core';

import { ErrorDirective } from './error.directive';

@Component({
  selector: 'display-error',
  template: `
    <img src="/assets/img/bug.svg">
    <h2 #content class="mat-h2"><ng-content></ng-content></h2>
    <h2 class="mat-h2" [innerHTML]="directive?.errorMessage" *ngIf="!content.innerText"></h2>
  `,
  styles: [
      `
      :host {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
      }

      img {
        display: block;
        width: 64px;
        filter: invert(.25);
      }
      `,
  ],
})
export class DisplayErrorComponent {
  constructor(@Optional() public directive: ErrorDirective) {}
}

display-error.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { DisplayErrorComponent } from './display-error.component';
import { ErrorDirective } from './error.directive';

@NgModule({
  declarations: [DisplayErrorComponent, ErrorDirective],
  exports: [DisplayErrorComponent],
  imports: [CommonModule],
})
export class DisplayErrorModule {}

error.directive.ts

import { Directive, Input, OnChanges, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[error]',
})
export class ErrorDirective implements OnChanges {
  private _view = null;

  @Input('error')
  public errorMessage: string | null;

  constructor(private _tplRef: TemplateRef<any>,
              private _viewContainer: ViewContainerRef) {
  }

  /**
   *
   */
  public ngOnChanges(): void {
    if (this.errorMessage && !this._view) {
      this._view = this._viewContainer.createEmbeddedView(this._tplRef);
    } else if (!this.errorMessage && this._view) {
      this._view = this._viewContainer.clear();
    }
  }
}

example.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'example',
  template: `<display-error *error="theError"></display-error>`,
})
export class ExampleComponent {
  public theError = 'Filed to fetch!';
}

The image referenced here must exist on assets path