Natu Academy

Welcome to the course

What is Angular?

Introduction

Set Up Your Toolkit on Windows

Set Up Your Toolkit on macOS

How a Single-Page App Works

Where Angular Fits: Angular vs React vs Vue

Why TypeScript?

TypeScript Basic Types

Interfaces: Describing Your Data

Union Types and Optional Properties

Classes: Data and Behaviour Together

Decorators: Giving a Class a Job

Modules: import and export

The Angular CLI

A Tour of an Angular Project

How an Angular App Starts

Anatomy of a Component

From Class to Template

Components Make a Tree

Composing Components

Component Styles Stay Local

Your Everyday Development Loop

Reading Error Messages

Project: Build the Book Tracker App Shell

Chapter Recap

TypeScript & Your First Angular App - Quiz

Introduction

Templates: HTML with Superpowers

Interpolation: Showing Data with {{ }}

Property Binding with [ ]

Event Binding with ( )

Class and Style Binding

Pipes: Formatting Data for Display

Angular's Built-in Pipes

Write Your Own Pipe

Built-in Control Flow: An Overview

@if and @else

@for: Repeating Items in a List

@empty and Loop Variables

Why track Matters in @for

@switch and @case

Exhaustive @switch with @default never

@let: Naming a Value in Your Template

Comments Inside Elements

Project: Build the Book List

Chapter Recap

Templates, Pipes & Control Flow - Quiz

Introduction

Why Signals?

Creating and Reading a Signal

Changing a Signal with set() and update()

Reading Signals in Templates

Connecting Inputs to Signals

computed(): Derived Values

How Signals Form a Graph

effect(): Side Effects

When NOT to Use effect()

Change Detection in Plain Terms

The Old Way vs Angular 22

Zoneless and OnPush: Angular 22's Defaults

Why Signals Make Zoneless Work

What Updates the Screen?

linkedSignal(): Writable but Linked

linkedSignal() with the Previous Value

Copy, Don't Mutate

Immutable Update Recipes

Project: Add Search and Filters

Chapter Recap

Signals - Quiz

Introduction

Why Split Components?

Inputs: Passing Data Down

Required Inputs

Inputs Are Signals

Input Transforms and Aliases

Outputs: Sending Events Up

Data Down, Events Up

model(): Two-Way Inputs

Two-Way Binding with [( )]

Smart vs Presentational Components

Passing Lists Through the Component Tree

Content Projection with ng-content

Multiple Slots with select

Component Styles and Encapsulation

:host: Styling the Component Itself

Designing Good Component APIs

Common Mistakes and How to Fix Them

Project: Build BookCard, BookList and StarRating

Chapter Recap

Component Communication - Quiz

Introduction

Why Services?

The New @Service() Decorator

@Service() vs @Injectable()

Asking for a Service with inject()

One Instance, Many Users

The Injector Tree

Where inject() Works

Providers at Component Level

The Signal Store Pattern

Private State, Public Read-Only

Methods Are the Only Way In

Using the Store: A Header Badge

Remembering Data with effect() and localStorage

@defer: Load It Later

@defer Triggers

@placeholder, @loading and @error

injectAsync(): Lazy-Loaded Services

Project: Build the Reading List

Chapter Recap

Services & Dependency Injection - Quiz