Introduction to Angular Programming

Course Overview

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

Prerequisites

Students should understand HTML structure, CSS styling, and fundamental JavaScript concepts. General knowledge regarding browser-based application and back-end data servers is useful.