Creating a Dynamic Reactive Angular Error Display Component

Image by GUILHERME BERNARDO from Pixabay

Updated Version


export interface ErrorTypes {
[key: string]: string;
errorTypes: ErrorTypes = {
NETWORK_ERROR: "Network Error",
DATA_ERROR: "Data Error"
<fs-error [error$]="dataError$" [errorTypes]="errorTypes"></fs-error>


import { Component, Input, OnInit } from "@angular/core";
import { Observable } from "rxjs";
import { ErrorTypes } from "./error.model";
selector: "fs-error",
template: `
<ng-container *ngIf="(error$ | async)"><div [ngSwitch]="error$ | async"><ng-container *ngFor="let key of errorTypeKeys"><div *ngSwitchCase="key"><h3>{{ errorTypes[key] }}</h3></div></ng-container><div *ngSwitchDefault>The error key had no matches</div></div></ng-container>`,styles: []
export class ErrorComponent implements OnInit {

error$: Observable<string>;
errorTypes: ErrorTypes;
errorTypeKeys: string[];
ngOnInit() {
this.errorTypeKeys = Object.keys(this.errorTypes);
<ng-container *ngIf="(error$ | async)">
<ng-container *ngFor="let key of errorTypeKeys"><div *ngSwitchCase="key"><h3>{{ errorTypes[key] }}</h3></div>
<h3>{{ errorTypes[key] }}</h3>
this.errorTypeKeys = Object.keys(this.errorTypes);


Founder of Firefly Semantics Corporation

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store