error dialog

Author: actionanand

src/app/app.component.html

@@ -1,10 +1,11 @@
+@if (error()) {
+  <app-error-modal title="An Error  has occurred!" [message]="error()" />
+}
+
 <header>
   <img src="logo.png" alt="Stylized globe" />
   <h1>PlacePicker</h1>
-  <p>
-    Create your personal collection of places you would like to visit or you
-    have visited.
-  </p>
+  <p>Create your personal collection of places you would like to visit or you have visited.</p>
 </header>
 
 <main>

src/app/app.component.ts

@@ -1,17 +1,21 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 
 import { AvailablePlacesComponent } from './places/available-places/available-places.component';
 import { UserPlacesComponent } from './places/user-places/user-places.component';
+import { ErrorService } from './services/error.service';
+import { ErrorModalComponent } from './shared/modal/error-modal/error-modal.component';
 
 @Component({
   selector: 'app-root',
   standalone: true,
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
-  imports: [AvailablePlacesComponent, UserPlacesComponent],
+  imports: [AvailablePlacesComponent, UserPlacesComponent, ErrorModalComponent],
 })
 export class AppComponent {
-  styles = ['color: indigo', 'background: #90EE90', 'font-weight: bold', 'font-size: 18px'].join(';');
+  private styles = ['color: indigo', 'background: #90EE90', 'font-weight: bold', 'font-size: 18px'].join(';');
+  private errorServ = inject(ErrorService);
+  protected error = this.errorServ.error;
 
   constructor() {
     console.log(

src/app/services/error.service.ts

@@ -0,0 +1,19 @@
+import { Injectable, signal } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ErrorService {
+  private _error = signal('');
+
+  error = this._error.asReadonly();
+
+  showError(message: string) {
+    console.error(message);
+    this._error.set(message);
+  }
+
+  clearError() {
+    this._error.set('');
+  }
+}

src/app/services/places.service.ts

@@ -6,6 +6,7 @@ import { catchError, map, tap } from 'rxjs/operators';
 import { throwError } from 'rxjs';
 
 import { Place } from '../models/place.model';
+import { ErrorService } from './error.service';
 
 @Injectable({
   providedIn: 'root',
@@ -15,6 +16,7 @@ export class PlacesService {
   loadedUserPlaces = this.userPlaces.asReadonly();
 
   private http = inject(HttpClient);
+  private errorServ = inject(ErrorService);
 
   loadAvailablePlaces() {
     return this.fetchPlaces('/api/v2/places', 'Error loading available places!');
@@ -47,6 +49,7 @@ export class PlacesService {
       .pipe(
         catchError(err => {
           this.userPlaces.set(prevPlaces);
+          this.errorServ.showError('Unable to store the selected place!');
           return throwError(() => new Error('Unable to store the selected place!'));
         }),
       );

src/app/shared/modal/error-modal/error-modal.component.css

@@ -0,0 +1,31 @@
+.error {
+  max-width: 40rem;
+  margin: auto;
+  padding: 1rem;
+  background-color: #f4c7c7;
+  color: #3e0505;
+}
+
+.confirmation-actions {
+  margin-top: 1rem;
+  display: flex;
+  justify-content: flex-end;
+  gap: 1rem;
+}
+
+button {
+  cursor: pointer;
+  font-family: 'Raleway', sans-serif;
+  font-size: 1rem;
+  padding: 0.5rem 1.5rem;
+  border: none;
+  border-radius: 4px;
+  background-color: #5d0909;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+  color: #fff;
+}
+
+button:hover,
+button:focus {
+  background-color: #3e0505;
+}

src/app/shared/modal/error-modal/error-modal.component.html

@@ -0,0 +1,10 @@
+<app-modal>
+  <div class="error">
+    <h2>{{ title() }}</h2>
+    <p>{{ message() }}</p>
+
+    <div class="confirmation-actions">
+      <button class="button" (click)="onClearError()">Okay</button>
+    </div>
+  </div>
+</app-modal>

src/app/shared/modal/error-modal/error-modal.component.ts

@@ -0,0 +1,21 @@
+import { Component, inject, input } from '@angular/core';
+import { ModalComponent } from '../modal.component';
+import { ErrorService } from '../../../services/error.service';
+
+@Component({
+  selector: 'app-error-modal',
+  standalone: true,
+  templateUrl: './error-modal.component.html',
+  styleUrl: './error-modal.component.css',
+  imports: [ModalComponent],
+})
+export class ErrorModalComponent {
+  title = input<string>();
+  message = input<string>();
+
+  private errorServ = inject(ErrorService);
+
+  onClearError() {
+    this.errorServ.clearError();
+  }
+}

src/app/shared/modal/modal.component.css

@@ -0,0 +1,31 @@
+dialog {
+  min-width: 30rem;
+  padding: 0;
+  z-index: 2;
+  background: #d5c7bc;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+  animation: slide-down-fade-in 0.3s ease-out forwards;
+}
+
+dialog::backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.6);
+}
+
+@keyframes slide-down-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-3rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

src/app/shared/modal/modal.component.html

@@ -0,0 +1,3 @@
+<dialog #dialog>
+  <ng-content />
+</dialog>

src/app/shared/modal/modal.component.ts

@@ -0,0 +1,16 @@
+import { AfterViewInit, Component, ElementRef, viewChild } from '@angular/core';
+
+@Component({
+  selector: 'app-modal',
+  standalone: true,
+  imports: [],
+  templateUrl: './modal.component.html',
+  styleUrl: './modal.component.css',
+})
+export class ModalComponent implements AfterViewInit {
+  private dialogEl = viewChild.required<ElementRef<HTMLDialogElement>>('dialog');
+
+  ngAfterViewInit(): void {
+    this.dialogEl().nativeElement.showModal();
+  }
+}