goofy ahh logic

src/app/app.component.html

@@ -1,3 +1,3 @@
 <app-navbar />
-
+<app-flash />
 <router-outlet />

src/app/app.component.ts

@@ -2,11 +2,12 @@ import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import {TodoTableComponent} from "./todo/table/todo-table.component";
 import {NavbarComponent} from "./navbar.component";
+import {FlashComponent} from "./flash.component";
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, TodoTableComponent, NavbarComponent],
+  imports: [RouterOutlet, TodoTableComponent, NavbarComponent, FlashComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })

src/app/flash.component.ts

@@ -0,0 +1,64 @@
+import {Component, inject, OnInit} from "@angular/core";
+import {NgClass, NgIf} from "@angular/common";
+import {ActivatedRoute, NavigationStart, Router} from "@angular/router";
+
+
+@Component({
+  standalone: true,
+  selector: 'app-flash',
+  imports: [
+    NgClass,
+    NgIf
+  ],
+  template: `
+    <div class="d-flex justify-content-center align-items-center p-3 rounded" [ngClass]="{'bg-danger': error, 'bg-success': !error}" style="max-width: 50%; margin: auto;" *ngIf="message">
+      <p>{{ message }}</p>
+    </div>
+  `
+})
+export class FlashComponent implements OnInit{
+  message!: string;
+
+  error: boolean = false;
+
+  route: ActivatedRoute = inject(ActivatedRoute);
+
+  router: Router = inject(Router);
+
+  timeOutId: number = 0;
+
+  ngOnInit() {
+    this.listenToRouteChanges();
+
+    this.displayMessage();
+  }
+
+  private listenToRouteChanges() {
+    this.router.events.subscribe((event) => {
+        if (event instanceof NavigationStart) {
+          console.log('NavigationStart');
+          this.displayMessage();
+        }
+    });
+  }
+
+  private displayMessage() {
+    this.route.queryParams.subscribe(params => {
+      if (params['message']) {
+        this.message = params['message'];
+        this.error = params['error'] === 'true';
+      } else {
+        this.message = '';
+      }
+    });
+
+    if (this.timeOutId) {
+      clearTimeout(this.timeOutId);
+    }
+
+    this.timeOutId = setTimeout(() => {
+      this.message = '';
+      this.router.navigate([], { queryParams: { message: null, error: null }, queryParamsHandling: 'merge' });
+    }, 5000);
+  }
+}

src/app/todo/add-todo.component.ts

@@ -2,6 +2,8 @@ import {Component, inject, OnInit} from "@angular/core";
 import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
 import {TodoService} from "./todo.service";
 import {Router} from "@angular/router";
+import {FlashComponent} from "../flash.component";
+import {NgIf} from "@angular/common";
 
 
 @Component({
@@ -37,6 +39,8 @@ export class AddTodoComponent implements OnInit {
 
   defaultDate!: Date;
 
+  errorMsg: string = '';
+
   ngOnInit() {
     const today = new Date();
     const tomorrow = new Date(today);
@@ -56,7 +60,25 @@ export class AddTodoComponent implements OnInit {
       category: this.form.get('category')?.value,
     }
 
+    let message = this.validateTodo(newTodo)
+    if (message) {
+      this.router.navigate([], {queryParams: {message: message, error: true}});
+      return;
+    }
+
     this.todoService.add(newTodo);
-    this.router.navigate(['/todos']);
+    this.router.navigate(['/todos'], {queryParams: {message: 'Todo added successfully'}});
+  }
+
+  private validateTodo(newTodo: { dueDate: any; title: any; category: any }) {
+    if (!newTodo.title) {
+      return 'Title is required';
+    } else if (!newTodo.dueDate) {
+      return 'Due Date is required';
+    } else if (!newTodo.category) {
+      return 'Category is required';
+    }
+
+    return
   }
 }

src/app/todo/table/todo-table.component.ts

@@ -4,6 +4,7 @@ import {Todo} from "../todo";
 import {NgForOf, NgIf} from "@angular/common";
 import {TableFilterComponent} from "./table-filter.component";
 import {SettingsService} from "../../settings/settings.service";
+import {Router} from "@angular/router";
 
 
 @Component({
@@ -13,7 +14,6 @@ import {SettingsService} from "../../settings/settings.service";
     NgForOf,
     TableFilterComponent,
     NgIf,
-
   ],
   standalone: true
 })
@@ -26,6 +26,8 @@ export class TodoTableComponent implements OnInit {
 
   isFiltered: boolean = false;
 
+  router: Router = inject(Router);
+
   ngOnInit() {
     this.todos = this.todoService.todos;
   }
@@ -33,14 +35,14 @@ export class TodoTableComponent implements OnInit {
   deleteTodo(todo: Todo) {
     this.todoService.delete(todo);
 
-    this.todos = this.todoService.todos;
+    this.router.navigate([], { queryParams: { message: 'Todo deleted' }});
   }
 
   toggleCompleted(todo: Todo) {
     todo.completed = !todo.completed;
 
     this.todoService.set(this._todos);
-    this.ngOnInit();
+    this.todos = this.todoService.todos;
   }
 
   updateFilter(filter: string) {