RouterLinks update

Author: sarthakpokharel

src/app/app.component.html

@@ -2,10 +2,10 @@
   <div class="container mx-auto flex justify-between items-center">
     <a href="#" class="text-white text-2xl font-semibold">Logo</a>
     <ul class="flex space-x-4">
-      <li><a href="/" class="text-white hover:text-gray-300">Home</a></li>
-      <li><a href="/about" routerLink="/about" class="text-white hover:text-gray-300">About</a></li>
-      <li><a href="/services" class="text-white hover:text-gray-300">Services</a></li>
-      <li><a href="/contact" class="text-white hover:text-gray-300">Contact</a></li>
+      <li><a href="javascript:void(0)" routerLink="/" class="text-white hover:text-gray-300">Home</a></li>
+      <li><a href="javascript:void(0)" routerLink="/about" class="text-white hover:text-gray-300">About</a></li>
+      <li><a href="javascript:void(0)" routerLink="/services" class="text-white hover:text-gray-300">Services</a></li>
+      <li><a href="javascript:void(0)" routerLink="/contact" class="text-white hover:text-gray-300">Contact</a></li>
     </ul>
   </div>
 </nav>

src/app/app.component.ts

@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, RouterLink, RouterLinkActive],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })