Integrated NQueen Visualizer

src/app/app.module.ts

@@ -2,9 +2,9 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { RouterModule } from '@angular/router';
 import { ToastrModule } from 'ngx-toastr';
+import { FormsModule } from '@angular/forms'; 
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // Import this module for animations
 import { provideAnimations } from '@angular/platform-browser/animations';
-
 import { AppComponent } from './app.component';
 
 @NgModule({
@@ -13,6 +13,7 @@ import { AppComponent } from './app.component';
   ],
   imports: [
     BrowserModule,
+    FormsModule,
     BrowserAnimationsModule, // Required for toastr animations
     RouterModule.forRoot([]), // Define your routes here
     ToastrModule.forRoot(), // Initialize Toastr globally

src/app/app.routes.ts

@@ -17,6 +17,7 @@ import { ContributorsComponent } from './components/contributors/contributors.co
 import { CodeEditorComponent } from './components/code-editor/code-editor.component';
 import { ReviewComponent } from './components/reviews/reviews.component';
 import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
+import { NQueenVisualizerComponent } from './components/n-queen-visualizer/n-queen-visualizer.component'
 
 
 import { AlgorithmComparisonComponent } from './components/algocompare/algocompare.component';
@@ -92,6 +93,10 @@ export const routes: Routes = [
     path: 'pagenotfound',
     component: PageNotFoundComponent,
   },
+  {
+    path: 'n-queen-visualizer',
+    component: NQueenVisualizerComponent,
+  },
   // {
   //   path: 'algo-compare',
   //   component: AlgorithmComparisonComponent,