Comprehensive Angular Programming

Introducing Angular

• What is Angular?
• Central Features of the Angular Framework (Highlighting Signals and Standalone Architecture)
• Appropriate Use Cases
• Angular Building Blocks
• Standalone Component Architecture
• Components, Directives, Pipes and Services
• NgModule Based Architecture
• Installing and Using Angular (CLI)
• Angular Example - with Standalone Component
• Running the Application
• Building and Deploying the Application

Introduction to TypeScript

• Angular and TypeScript
• TypeScript Syntax
• The Type System - Defining Variables, Arrays, Primitives
• Type in Functions, Type Inference
• Defining Classes (Constructors, Methods, Visibility)
• Interfaces
• Working with ES6+ Modules
• let vs const (replacing var)
• Arrow Functions
• Template Strings
• Generics

Standalone Components

• What is a Component?
• Creating Standalone Components
• The Component Class
• The @Component Decorator
• Component Templates (Inline vs External)
• Using a Component within another Standalone Component
• Component Hierarchy
• The Application Root Component (Standalone Bootstrap)
• Component Lifecycle Hooks
• CSS Styles and Encapsulation

Component Templates & Control Flow

• Templates and Data Binding
• Interpolation {{ }}
• Property Binding [ ]
• Attribute Binding [attr.]
• Class Binding [class.] & Style Binding [style.]
• Event Binding ( )
• Two-Way Binding [(ngModel)] (Requires FormsModule or ReactiveFormsModule)
• Control Flow Syntax
• Conditional Rendering: @if, @else if, @else
• List Rendering: @for (with track requirement)
• Switching Logic: @switch, @case, @default
• Template Reference Variables (#var)
• The ng-template, ng-container elements (Use cases beyond basic control flow)
• Attribute Directives (ngClass, ngStyle - imported standalone or via CommonModule)
• Structural Directives

Angular Signals & Reactivity

• Introduction to Angular Signals
• What are Signals? Why use them?
• Creating Writable Signals (signal())
• Reading Signal Values
• Updating Signals (set(), update())
• Computed Signals (computed())
• Creating Derived State
• Lazy Evaluation and Memoization
• Effects (effect())
• Running Side Effects in Response to Signal Changes
• Cleanup Logic (manualCleanup, DestroyRef)
• Signals in Components (OnPush change detection interaction)
• Using Signals for Inter-Component Communication (Alternative/Supplement to Input/Output)
• RxJS Interoperability (if needed)

Inter-Component Communication

• Data Flow Architecture (Parent-to-Child, Child-to-Parent)
• Parent-to-Child: @Input() Decorator
• Child-to-Parent: @Output() Decorator with EventEmitter
• Using Template Reference Variables for Interaction
• Communication via Services (Shared State)
• Communication via Signals

Template-Driven Forms

• Introduction to Template-Driven Forms
• Importing FormsModule (into standalone component or module)
• Setting Up a Form (ngForm)
• Getting User Input (ngModel)
• Two-Way Data Binding ([(ngModel)])
• Form Validation (Built-in validators: required, minlength, etc.)
• Displaying Validation State and Errors (ngControl status classes)
• Handling Different Input Types (Checkboxes, Selects, Radio Buttons)
• Form Submission (ngSubmit)

Reactive Forms

• Introduction to Reactive Forms (Programmatic approach)
• Importing ReactiveFormsModule
• The Building Blocks: FormControl, FormGroup, FormArray
• Constructing Forms in the Component Class
• Connecting Template to Form (formGroup, formControlName, formArrayName)
• Getting/Setting Form Values (valueChanges, statusChanges, setValue, patchValue)
• Forms and type safety
• Built-in and Custom Validators
• Displaying Validation Errors
• Dynamic Forms with FormArray

Services and Dependency Injection (DI)

• What is a Service?
• Creating a Service (@Injectable)
• Dependency Injection Overview
• Providing Services:
• Root Injector (providedIn: 'root') - Preferred method
• Component/Directive Providers (providers array in decorator)
• Module Providers (providers array in @NgModule - less common now)
• Injecting Services (Constructor Injection)
• Injector Hierarchy Basics
• Using Injection Tokens (InjectionToken)
• Optional Dependencies (@Optional)
• Controlling Visibility (@Host, @SkipSelf)

HttpClient

• Using the Angular HttpClient for API Communication
• Importing provideHttpClient()
• Importing HttpClientModule
• Making Requests: GET, POST, PUT, DELETE
• Working with RxJS Observables for HTTP Responses
• Handling Responses (Typed Responses)
• Error Handling (catchError operator)
• Sending Data (Request Body)
• Setting Headers and Request Options
• Working with HttpResponse object (Accessing headers, status)
• Interceptors (Modifying Requests/Responses)

Pipes and Data Formatting

• What are Pipes? Transforming Data in Templates
• Using Built-In Pipes (DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, JsonPipe, AsyncPipe)
• Using Pipes in Standalone Components
• Chaining Pipes
• Passing Parameters to Pipes
• Creating Custom Pipes (@Pipe, PipeTransform)
• Standalone Pipes (standalone: true)
• Pure vs. Impure Pipes
• Using the AsyncPipe

Routing Basics

• The Angular Component Router
• Setting up Routing (provideRouter - standalone approach)
• Defining Routes (Routes array)
• Displaying Routed Components
• Navigation:
• Declarative (routerLink, routerLinkActive)
• Programmatic (Router.navigate(), Router.navigateByUrl())
• Passing Route Parameters (/:id)
• Retrieving Route Parameters
• Query Parameters

Advanced Routing

• Lazy Loading Standalone Components
• Route Guards
• CanActivate, CanActivateChild, CanDeactivate, Resolve
• Functional Guards
• Child Routes (Nested Routes)
• Multiple/Auxiliary Router Outlets
• Router Events

Using NgModules

• When to use NgModules
• Creating a project that uses NgModules
• NgModule Basics (@NgModule decorator)
• NgModule Metadata Properties (declarations, imports, exports, providers, bootstrap)
• Setting up Routing for Modules
• Providing Services in NgModules
• Module level HttpClient Configuration
• Lazy Loading Modules
• Feature Modules vs. Root Module
• Shared Modules / Core Module patterns
• Using Standalone Components within NgModules
• Importing NgModules into Standalone components
• When to still use NgModules

Observables & RxJS

• Introduction to Observables
• What are Observables? (vs. Promises)
• Advanced RxJS Operators for HTTP (map, filter, tap, switchMap, mergeMap, forkJoin, catchError, retry)
• Managing Subscriptions (AsyncPipe, takeUntil, take(1))
• Creating Observables
• Error Handling Strategies
• Caching HTTP Responses

Unit Testing Angular Applications

• Introduction to Unit Testing (Jasmine, Karma/Jest)
• Setting up the Testing Environment (Angular CLI generates boilerplate)
• Writing Test Suites (describe) and Specs (it)
• Using Matchers (expect)
• Setup and Teardown (beforeEach, afterEach, etc.)
• Testing Standalone Components
• Configuring TestBed for Standalone Components (imports)
• ComponentFixture, DebugElement
• Testing Services (with and without dependencies)
• Mocking Dependencies
• Testing Asynchronous Code (async, fakeAsync, tick)
• Testing Components with Inputs/Outputs
• Testing Routed Components (RouterTestingModule)
• Testing with HttpClientTestingModule
• Code Coverage

Debugging Angular Applications

• Overview of Debugging Techniques
• Using Browser Developer Tools (Breakpoints, Console)
• Viewing TypeScript Code in Debugger
• Using debugger Keyword
• Debug Logging (console.log)
• Angular DevTools Browser Extension
• Inspecting Component Structure
• Profiling Change Detection
• Understanding and Debugging Common Errors

Lab Exercises

• Getting Started with Angular
• Introduction to TypeScript
• Standalone Components
• Component Templates
• Angular Signals
• Inter-Component Communication
• Template-Driven Forms
• Reactive Forms
• Creating Services
• Using HttpClient
• Pipes and Data Formatting
• Routing Basics
• Advanced Routing
• NgModules Lab
• Observables & RxJS
• Unit Testing for Angular
• Debugging Angular Applications