Week 4 Day 3: Configured Angular routing and navigation

Week-4/Day-3/Readme.md

@@ -0,0 +1,32 @@
+# Week 4 – Day 3: Angular Routing
+
+## Date
+07 January 2026
+
+## Objective
+To understand Angular routing and implement navigation between multiple components in a single-page application.
+
+## Topics Covered
+- Introduction to Angular Routing
+- RouterModule and Routes
+- router-outlet
+- routerLink
+- Client-side Navigation
+
+## Activities Performed
+- Configured routing module
+- Created multiple route-based components
+- Implemented navigation using routerLink
+- Used router-outlet for dynamic view rendering
+- Tested navigation without page reload
+
+## Tools & Technologies Used
+- Angular
+- TypeScript
+- Angular Router
+
+## Learning Outcome
+Gained practical experience in building single-page navigation using Angular routing.
+
+## Status
+Completed

Week-4/Day-3/angular-routing.md

@@ -0,0 +1,30 @@
+## Angular Routing – Basics
+
+### What is Routing?
+Routing allows navigation between different views without reloading the page.
+
+### Why Routing is Important?
+- Improves user experience
+- Supports Single Page Applications
+- Makes applications structured
+
+### Router Module Setup
+const routes: Routes = [
+  { path: 'home', component: HomeComponent },
+  { path: 'about', component: AboutComponent }
+];
+
+### Router Outlet
+<router-outlet></router-outlet>
+
+### Navigation Links
+<a routerLink="/home">Home</a>
+
+### Practical Work Done
+- Created routes
+- Linked multiple components
+- Used router-outlet
+- Navigated without page reload
+
+### Learning Outcome
+Learned how Angular handles client-side navigation efficiently.