Angular By Balakrishna Reddy

 Creation Of Component ✅ Step 1: Generate Components ng generate component parent-dashboard ng generate component student-detail Observe in change in File Structure src/ └── app/     ├── parent-dashboard/     │   ├── parent-dashboard.component.ts     │   └── parent-dashboard.component.html     └── student-detail/         ├── student-detail.component.ts         └── student-detail.component.html Parent → Child Communication (via @Input ) Use Case: Parent sends student data to child component. parent-dashboard.component.ts import { Component } from '@angular/core' ; import { FormsModule } from '@angular/forms' ; import { StudentDetail } from '../student-detail/student-detail' ; @ Component ({   selector : 'app-parent-dashboard' ,   imports : [ FormsModule , StudentDetail ],   templateUrl : './parent-dashboard.html' ,   styleUrl : './parent-dashboard.cs...

  Angular 20 Project Folder Structure my-angular-app/ ├── src/ │   ├── app/ │   │   ├── app-routing.module.ts   <-- Routing configuration │   │   ├── app.component.ts        <-- Root component logic │   │   ├── app.component.html      <-- Root component template │   │   ├── app.component.css       <-- Root component styling │   │   └── app.module.ts           <-- Main application module │   │ │   ├── assets/                     <-- Static assets (images, etc.) │   ├── environments/               <-- Environment config (prod/dev) │   │   ├── environment.ts │   │   └── environment.prod.ts │  ...

  🔶 What is Angular? Angular is a TypeScript-based open-source front-end web application framework developed by Google . It's used to build Single Page Applications (SPAs) that are fast, dynamic, and scalable. It provides everything you need to build modern web apps: components, routing, services, forms, HTTP, animations , etc. ✅ Angular is a complete framework — unlike libraries like React or jQuery. 🧩 Key Features of Angular Component-based architecture Two-way data binding Dependency Injection TypeScript support Built-in routing and HTTP client Reactive forms and Observables (RxJS) CLI tooling for scaffolding and testing 🌐 What is an SPA (Single Page Application)? An SPA is a web application that loads a single HTML page and dynamically updates the content without reloading the page . Angular handles routing within the browser , so navigating between pages feels instant. ✅ Example: Gmail, Google Docs, Facebook are all ...

  📘 Angular 20 - 45 Day Learning Plan (2 Hours/Day) 🔰 Week 1: Angular Basics & Setup Day Topics 1 What is Angular, SPA Concept, Tools Setup 2 Angular CLI, Project Creation, Folder Structure 3 Components – Creation, Communication (Input/Output) 4 Templates, Interpolation, Property & Event Binding 5 Directives – *ngIf, *ngFor, ngClass, ngStyle 6 Hands-on mini project: Component-based UI 7 Quiz + Q&A + Practice 🧠 Week 2: Forms and Pipes Day Topics 8 Template-driven forms 9 Reactive forms 10 Form validation (built-in + custom) 11 Built-in Pipes and Custom Pipes 12 Two-way Binding & ngModel 13 Practice Day – Create a full form module 14 Quiz + Assignments 🔗 Week 3: Services, Dependency Injection, Routing Day Topics 15 Creating and using Services 16 Dependency Injection in Angular 17 Routing basics, RouterModule setup 18 Route Parameters, Nested Routing 19 Navigation Guards 20 Project: Basic CRUD with routing 21 Debugging & Code Review Session 📦 Week 4:...