Add ng-bootstrap and simple error handling

package.json

@@ -18,8 +18,9 @@
     "@angular/platform-browser": "^17.2.0",
     "@angular/platform-browser-dynamic": "^17.2.0",
     "@angular/router": "^17.2.0",
+    "@ng-bootstrap/ng-bootstrap": "^16.0.0",
     "@popperjs/core": "^2.11.8",
-    "bootstrap": "^5.3.3",
+    "bootstrap": "^5.3.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"
@@ -36,7 +37,7 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.3.2",
-    "prettier": "^3.2.5"
+    "prettier": "^3.2.5",
+    "typescript": "~5.3.2"
   }
-}
+}

src/app/comps/error/error.component.html

@@ -0,0 +1,16 @@
+<ng-template #errorModal>
+	<div class="modal-header">
+		<h4 class="modal-title" id="modal-basic-title">Iets ging fout...</h4>
+		<button type="button" class="btn-close" aria-label="Close" (click)="close()"></button>
+	</div>
+	<div class="modal-body">
+		<form>
+			<div class="mb-3">
+				<label for="dateOfBirth">We weten niet wat.</label>
+			</div>
+		</form>
+	</div>
+	<div class="modal-footer">
+		<button type="button" class="btn btn-outline-dark" (click)="close()">Save</button>
+	</div>
+</ng-template>

src/app/comps/error/error.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ErrorComponent } from './error.component';
+
+describe('ErrorComponent', () => {
+  let component: ErrorComponent;
+  let fixture: ComponentFixture<ErrorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ErrorComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ErrorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/comps/error/error.component.ts

@@ -0,0 +1,20 @@
+import { AfterContentInit, Component, OnInit, TemplateRef, ViewChild, inject } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+    selector: 'app-error',
+    standalone: true,
+    imports: [],
+    templateUrl: './error.component.html',
+    styleUrl: './error.component.scss',
+})
+export class ErrorComponent implements AfterContentInit {
+
+    ngAfterContentInit(): void {
+    }
+
+    open() {
+    }
+
+    close() {}
+}

src/app/pages/main/main.component.html

@@ -1,3 +1,12 @@
+@if (error) {
+    <app-error></app-error>
+    <div style="background-color: red">
+        <h1>Iets ging fout!</h1>
+        <p>{{ error.message }}</p>
+        <small>We hebben nog geen mooie error pagina gebouwd</small>
+    </div>
+}
+
 <div class="container">
     <div class="row">
         <div class="col-lg-6 col-sm-12">

src/app/pages/main/main.component.ts

@@ -1,13 +1,14 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, TemplateRef, inject } from '@angular/core';
 import { ApiService } from '../../services/api.service';
 import { JourneyResult } from '../../models/journey-result';
 import { DatePipe } from '@angular/common';
-import { JourneyExpectation } from '../../enums/journey-expectation';
+import { ErrorComponent } from '../../comps/error/error.component';
+import { HttpErrorResponse } from '@angular/common/http';
 
 @Component({
     selector: 'app-main',
     standalone: true,
-    imports: [DatePipe],
+    imports: [DatePipe, ErrorComponent],
     templateUrl: './main.component.html',
     styleUrl: './main.component.scss',
 })
@@ -19,6 +20,7 @@ export class MainComponent implements OnInit {
     possibility: JourneyResult | undefined;
     loadingPossibility: boolean = false;
     searchFailed = false;
+    error: HttpErrorResponse | undefined;
 
     constructor(private apiService: ApiService) {}
 
@@ -79,6 +81,7 @@ export class MainComponent implements OnInit {
             this.loadingPossibility = true;
             this.apiService.GetPossibility(this.originStop, this.destinationStop).subscribe({
                 next: (data) => this.setPossibility(data),
+                error: (error) => this.handleError(error),
             });
         }
     }
@@ -97,4 +100,9 @@ export class MainComponent implements OnInit {
             }
         });
     }
+
+    handleError(error: HttpErrorResponse) {
+        this.error = error;
+        console.log(error);
+    }
 }

src/styles.scss

@@ -2,3 +2,6 @@
 
 /* Importing Bootstrap SCSS file. */
 @import 'bootstrap/scss/bootstrap';
+
+/* Importing Bootstrap SCSS file. */
+@import 'bootstrap/scss/bootstrap';