🚀 Introduction to Angular 🅰️

🔍 What is Angular? 🤔

A TypeScript-based front-end framework for building dynamic web applications.

🌟 Features of Angular ⚡

🏗️ Component-based architecture
🔄 Two-way data binding
⚡ High performance with RxJS
🌎 Cross-platform development

🔄 Angular vs React vs Vue 🔥

Comparing popular front-end frameworks.

📜 History of Angular 📅

Evolution from AngularJS to Angular 2+.

🔢 Angular Versions & Upgrades 🔄

Keeping up with the latest Angular releases.

🛠️ Setting Up Angular 🏗️

📌 Installing Angular CLI & Creating a New Project 🏗️

npm install -g @angular/cli
ng new my-angular-app
cd my-angular-app
ng serve

📐 Angular Architecture Overview 🏗️

Understanding modules, components, services, and directives.

🎯 TypeScript for Angular 📝

📌 Introduction to TypeScript 🅰️

🔄 TypeScript vs JavaScript ⚖️

🔢 Variables & Data Types 📊

🔁 Functions & Arrow Functions 🎯

📜 Interfaces & Classes 🏛️

🏷️ Decorators (@Component, @Injectable) 🏷️

📂 Modules & Namespaces 📁

🔄 Promises & Observables ⏳

🏗️ Angular Modules & Components 🏗️

📌 What is an Angular Module? 📜

🏗️ Creating & Using Modules (NgModule) 🏗️

🎭 What is a Component? 🎭

🔄 Creating Components using CLI ⚡

ng generate component my-component

🎭 Component Decorators & Metadata 🏷️

🎨 Template & Styles in Components 🎨

🔄 Component Lifecycle Hooks (ngOnInit, ngOnDestroy) 🔄

🔗 Nested Components & Communication (@Input, @Output) 🔗

🔀 Parent-Child Component Interaction 🔄

🔄 Data Binding & Directives 🔗

🔄 One-Way Data Binding ({{ expression }}) 🎯

🔄 Two-Way Data Binding ([(ngModel)]) 🔄

🔗 Property Binding ([property]) 📌

🔄 Event Binding ((event)) 🎯

🔧 Built-in Directives 🛠️

*ngIf, *ngFor, *ngSwitch
[ngClass], [ngStyle]

🔧 Custom Directives 🛠️

📝 Angular Forms 📑

📌 Template-Driven Forms 📜

⚙️ Reactive Forms 🔄

🎛️ Form Controls & Form Groups 🏗️

✅ Validators (Required, MinLength, MaxLength) 📏

🛠️ Custom Validators ⚡

📤 Handling Form Submission 📩

🚀 Routing & Navigation 🗺️

📌 Angular Router Basics 🛤️

🔄 Configuring Routes (app-routing.module.ts) 🏗️

🔗 RouterModule & Routes 🌍

🔢 Route Parameters & Query Params 🏷️

🚀 Lazy Loading Modules ⚡

🔒 Route Guards (AuthGuard, CanActivate, CanDeactivate) 🔑

🔄 Wildcard & Redirect Routes 🔀

🔧 Services & Dependency Injection ⚙️

📌 Creating a Service using CLI 🛠️

ng generate service my-service

🔄 Injecting Services into Components 🚀

🔗 Singleton Services (providedIn: 'root') 🔄

📡 HTTP Client & API Calls 🌐

🛠️ Using Interceptors (HttpInterceptor) ⚙️

🔄 Observables & RxJS ⏳

🔍 What are Observables? 🔎

🔄 Observables vs Promises 🔄

🏗️ Creating & Subscribing to Observables 🏗️

🔧 RxJS Operators (map, filter, debounceTime, switchMap) 🛠️

🔄 Using async Pipe with Observables 🔄

🔄 Angular Pipes 🚀

📌 Built-in Pipes (uppercase, lowercase, date, currency) 🔤

🔄 Custom Pipes (Creating a Pipe with ng generate) 🔄

⚡ Pure vs Impure Pipes 🔄

🔄 Async Pipe 🔄

🔗 Angular HTTP Client 🌍

📡 Fetching Data using HttpClientModule 🌐

🔄 Making GET, POST, PUT, DELETE Requests 🔄

🚨 Handling Errors with catchError ⚠️

🛠️ Using Interceptors to Modify HTTP Requests 🛠️

📊 Angular State Management 🏆

📌 Using Services for State Management 🔄

🔄 Sharing Data with Services 🔄

⚡ NgRx (Redux for Angular) 🏛️

🏗️ Actions, Reducers & Effects 🎭

🔎 Store Selectors & Dispatching Actions 🚀

🔄 Using BehaviorSubject for State Management 🔄

🎨 Angular Animations 🎭

📌 Angular Animation API 🎬

🔄 Using @angular/animations 🔄

🎭 Creating Basic Animations (fadeIn, fadeOut) 🎭

🔄 Advanced Animations with keyframes() 🔄

🎬 Using query(), stagger(), and animate() 🎥

🛡️ Angular Security Best Practices 🔐

🚀 Preventing XSS Attacks ⚠️

🔒 Content Security Policy (CSP) 🛡️

🔍 Using Angular Sanitization (DomSanitizer) 🛠️

🔑 Handling Authentication & Authorization 🔐

🔑 JWT Authentication in Angular 🚀

⚡ Performance Optimization in Angular 🚀

🔄 Lazy Loading Modules 🔄

📌 OnPush Change Detection Strategy ⚡

⚙️ Optimizing Bundle Size (ng build --prod) 🛠️

🔄 Caching & Service Workers 🚀

🔗 Using trackBy in *ngFor 📌

📡 Optimizing HTTP Requests with forkJoin 📊

🌍 Angular Progressive Web Apps (PWA) 📱

🔥 What is a PWA? 📲

📌 Adding PWA Capabilities to an Angular App 🛠️

ng add @angular/pwa

⚡ Service Workers & Caching 🔄

📡 Offline Support & Background Sync 🚀

🚀 Angular Deployment 🏗️

🔄 Building Angular App for Production 🚀

ng build --prod

🌎 Deploying on Firebase, Netlify, Vercel, AWS, or DigitalOcean 🌍

🌐 Server-Side Rendering (SSR) with Angular Universal 🚀

Sorting Example in Angular

Sorting an Array of Names Alphabetically

Example: Sorting an Array in an Angular Component

import { Component } from '@angular/core';

@Component({
  selector: 'app-sort-example',
  template: `
    
      
      
        {{ name }}
      
    
  `,
  styleUrls: ['./sort-example.component.css']
})
export class SortExampleComponent {
  names: string[] = ['Charlie', 'Alice', 'Bob', 'David'];

  sortNames() {
    this.names.sort();
  }
}

Angular : Quiz, Questions, Mock Test