Intro. of Angular Routing and Forms

Week-04/Day_03/README.md

@@ -0,0 +1,64 @@
+# Angular Routing
+
+## Overview
+Angular Routing allows navigation between different components in a Single Page Application (SPA) without reloading the page.
+
+It maps URL paths to components and dynamically loads them inside the application.
+
+---
+
+## Key Concepts
+
+### Routes
+Routes define the relationship between a URL path and a component.
+
+Example:
+
+const routes: Routes = [
+  { path: 'home', component: HomeComponent },
+  { path: 'about', component: AboutComponent }
+];
+
+---
+
+### Router Outlet
+`<router-outlet>` is a directive that acts as a placeholder where routed components are displayed.
+
+Example:
+
+<router-outlet></router-outlet>
+
+---
+
+### RouterLink
+Used in HTML to navigate between routes.
+
+Example:
+
+<a routerLink="/home">Home</a>
+<a routerLink="/about">About</a>
+
+---
+
+### Programmatic Navigation
+You can navigate using the Router service.
+
+Example:
+
+constructor(private router: Router) {}
+
+goHome() {
+  this.router.navigate(['/home']);
+}
+
+---
+
+## Steps to Implement Routing
+
+1. Install Angular Router (included in Angular CLI projects)
+2. Define routes in a routes file
+3. Import RouterModule
+4. Use `<router-outlet>` in the main template
+5. Add navigation links using `routerLink`
+
+---