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`
+
+---

Week-04/Day_04/README.md

@@ -0,0 +1,70 @@
+# Angular Forms
+
+## Overview
+Angular Forms are used to capture user input and validate data in web applications.
+
+Angular provides two types of forms:
+- Template-driven forms
+- Reactive forms
+
+---
+
+## Template-Driven Forms
+
+Template-driven forms rely mainly on HTML templates and Angular directives.
+
+Example:
+
+<form #userForm="ngForm">
+  <input name="username" ngModel required>
+  <button type="submit">Submit</button>
+</form>
+
+Features:
+- Easy to use
+- Suitable for simple forms
+- Uses `ngModel` directive
+
+---
+
+## Reactive Forms
+
+Reactive forms are defined in TypeScript using FormControl and FormGroup.
+
+Example:
+
+import { FormGroup, FormControl } from '@angular/forms';
+
+profileForm = new FormGroup({
+  name: new FormControl(''),
+  email: new FormControl('')
+});
+
+HTML:
+
+<form [formGroup]="profileForm">
+  <input formControlName="name">
+  <input formControlName="email">
+</form>
+
+Features:
+- More control
+- Better for complex forms
+- Easy validation and testing
+
+---
+
+## Form Validation
+
+Angular provides built-in validation such as:
+
+- required
+- minlength
+- maxlength
+- pattern
+
+Example:
+
+<input formControlName="email" required>
+
+---