RxJS in the Wild: Alerts

alert-color-class-name.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { Alert, AlertColor } from './alert';

@Pipe({
  name: 'alertColorClassName'
})
export class AlertColorClassNamePipe implements PipeTransform {

  transform(alert: Alert): string {
    if (alert?.color === AlertColor.Green) {
      return 'alert-success';
    }

    if (alert?.color === AlertColor.Yellow) {
      return 'alert-warning';
    }

    return 'alert-danger';
  }
}

alert.component.html

<ng-container *ngIf="alerts$ | async as alerts">
  <ul *ngIf="alerts?.length">
    <li *ngFor="let alert of alerts">
      <div class="d-flex justify-content-between rounded cursor-pointer p-3 mt-2 w-100"
        [ngClass]="alert | alertColorClassName" (click)="onRemoveAlertClick(alert.id)">
        <div></div>
        <div>
          {{alert.message}}
        </div>
        <div>
          <button type="button" class="btn-close float-right" aria-label="Close"></button>
        </div>
      </div>
    </li>
  </ul>
</ng-container>

alert.component.scss

$media-breakpoint-up-lg: 992px;

:host {
    position: fixed;
    z-index: 10000;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

@media only screen and (max-width: $media-breakpoint-up-lg) {
    :host {
        width: 100%;
    }
}

@media only screen and (min-width: $media-breakpoint-up-lg) {
    :host {
        width: 500px;
    }
}

.cursor-pointer {
    cursor: pointer;
}

ul { 
    margin-top: 15px;
    list-style-type: none;
    padding-left: 0;
}

alert.component.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Observable } from 'rxjs';
import { Alert } from "./alert";
import { AlertService } from './alert.service';


@Component({
  selector: 'app-alert',
  templateUrl: './alert.component.html',
  styleUrls: ['./alert.component.scss']
})
export class AlertComponent {
  alerts$: Observable<Alert[]>;
  
  constructor(private _alertService: AlertService) {
    this.alerts$ = this._alertService.alerts$;
  }

  onRemoveAlertClick(id: string): void {
    this._alertService.dismissAlert(id);
  }
}