Introduction to 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

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