Angular Signals In Depth (Angular 18)

Learn how to build modern Angular applications by leveraging the new Signals API. Learn common signal-based UI patterns.

What you'll learn

Code in Github repository with downloadable ZIP files

Learn how to build modern Angular applications with Signals

Learn Angular Signals in depth, including computed(), effect() and more

Learn RxJs Interoperability with Signals

Learn how to build an Angular application with minimal RxJs today

Learn common UI signal-based patterns

Learn error handling with Signals and signal-based Authentication

Learn the master-detail pattern with Signals, and other commonly used patterns

Requirements

Some Typescript, HTML & CSS

Some basic knowledge of Angular is all that you need

Description

This Course In a NutshellI'm sure that you already heard a lot about Angular Signals, and how they provide you with a completely new way of writing Angular applications!You probably also heard that RxJs is gradually becoming optional in Angular.So the big question in everyone's mind is: what does an Angular application look like if it's written with signals and minimal RxJs?And that is exactly what this course is all about!We are going to build a small application in Angular using signals, and present you with some common design patterns that are you likely going to need almost for sure to build an application in signal style.Course OverviewSo here is how we are going to structure this course: we are going to start by explaining in detail what are signals in Angular, why they are useful, and cover in depth the 3 core primitives: signals, computed signals and effects.Then we are going to use the core signal concepts to build a small Angular application from scratch using the new signal-based component authoring API (we will avoid the old API that is based on decorators).We are going to cover a complete CRUD example using signals and a local backend, and we are going to cover different ways of doing HTTP in Angular using async/await, with and without the Angular HTTP client.We are going to show how to do error handling, and cover how to implement using a signal-based approach common application features such as loading indicators, user messages handling, master-detail scenario, stateful signal-based services, and several other common application features and patterns that you are likely going to need.We will also show how to handle authentication on the frontend using signals and functional guards.And if you need RxJs for certain edge cases, you will also learn about the powerful RxJs interoperability that we have available with signals.Table of ContentsThis course covers the following topics:Deep dive into Angular SignalsAbout signal-based change detectionComputed SignalsEffectsThe new signal-based component API: inputs and outputsComplete CRUD example with signalsHTTP with optional RxJs (two ways of doing it)Error handling and signalsLoading indicators with signalsStateful signal-based servicesHandling user error messages with signalsAngular Authentication with signalsSignal-based view queriesviewChild, viewChildren, contentChild, contentChildrenBi-directional binding with signals and the model() APIMaster-detail scenario with SignalsRxJs InteroperabilityConclusion and final ThoughtsWhat Will You Learn In this Course?In this course you are going to learn in detail how to use signals to build modern Angular applications using the new signal-based component authoring API, async/await and with minimal RxJs.You are going to become familiar with a series of commonly used signal-based application patterns that you are going to need for sure in just about any signal based application that you will ever build.At the end of the course, you will feel very comfortable with the core notions of signals, and you will know how exactly to use signals to build an Angular application from A to Z.Have a look at the course free lessons, and please enjoy the course!

Overview

Section 1: Introduction To Angular Signals

Lecture 1 Modern Angular With Signals - Introduction

Lecture 2 IMPORTANT - Recommended Software Versions

Lecture 3 Setting Up Your Development Environment

Lecture 4 Writing Your First Angular Signal

Lecture 5 Why Angular Signals? Main Benefits

Lecture 6 The Current State of Signal-Based Change Detection

Lecture 7 The Angular signals update API and Read-Only Signals

Lecture 8 Angular Signals and Immutability - Objects

Lecture 9 Angular Signals and Immutability - Arrays

Lecture 10 Angular Computed Signals - Everything You Need To Know

Lecture 11 Angular Signal Effects - Everything You Need To Know

Lecture 12 Angular Signal Effects - Setting The Injection Context

Lecture 13 Angular Signal Effects - When To Use allowSignalWrites

Lecture 14 Angular Signal Effects - How To Do Manual Effect Cleanup

Section 2: Complete CRUD Example With Angular Signals

Lecture 15 Introduction To The Complete CRUD With Signals Section

Lecture 16 Why Making RxJs Optional In Angular?

Lecture 17 CRUD Read Operation - Defining The API of our Service Layer

Lecture 18 Angular HTTP Service Layers - Two Different Options

Lecture 19 Fetching Data From the Service Layer With Error Handling

Lecture 20 Loading Data With OnInit or afterNextRender

Lecture 21 Angular Service Layers With The HTTP Client and async / await

Lecture 22 Defining Derived Data Declaratively Using computed()

Lecture 23 Angular Signal Inputs - Optional and Required Inputs

Lecture 24 CRUD - Display a List of Courses

Lecture 25 CRUD Service Layer - Fetch Implementation

Lecture 26 CRUD Service Layer with async / await and the Angular HTTP Client

Lecture 27 CRUD Update - Opening the Edit Course Dialog

Lecture 28 CRUD Update Edit Course Form

Lecture 29 CRUD Update - Triggering the HTTP PUT Call

Lecture 30 CRUD Update - Updating the UI

Lecture 31 CRUD Delete - Full Implementation

Lecture 32 CRUD Create Course Implementation

Section 3: Angular Signal-Based Loading Indicator

Lecture 33 New Section - Signal-Based Angular Loading Indicator

Lecture 34 Signal-Based Loading Indicator - Shared Signal Service

Lecture 35 Loading Indicator HTTP Interceptor

Lecture 36 Skipping The Loading Indicator Using an HTTP Context

Section 4: Angular Signal-Based User Messages and Error Handling

Lecture 37 Signal-Based User Messages - Shared Service

Lecture 38 Messages Component - Step-by-Step Implementation

Lecture 39 Messages Signal-Based Service Demo

Section 5: Angular Signal-Based Authentication

Lecture 40 Angular Signal-Based Authentication

Lecture 41 Implementing The Login Form

Lecture 42 Authentication Signal-Based Service

Lecture 43 Adapting the UI To The User Authentication Status

Lecture 44 Implementing Logout

Lecture 45 Save User Profile In Local Storage - Survive Refreshes

Lecture 46 Implementing an Authentication Guard With Signals

Section 6: Model Inputs

Lecture 47 Model Inputs

Lecture 48 Model Inputs and Two-Way Data Binding

Lecture 49 Before Continuing- Tiding Up a Couple of Issues

Section 7: Building the View Course Page

Lecture 50 Building the View Course Page

Lecture 51 Implementing the Template of The Course Component

Lecture 52 Implementing The Course Resolver

Lecture 53 Implementing the Lessons Service

Lecture 54 Implementing the Lessons Resolver

Section 8: Master Detail UI Pattern

Lecture 55 Master Detail UI Pattern

Lecture 56 Master Detail - Implement The Search Lessons Form

Lecture 57 Angular Signal Queries - viewChild

Lecture 58 The ViewChildren Signal Query

Lecture 59 Conclusion of the Implementation of the Master Detail Scenario

Lecture 60 Beginning of the Implementation of the Detail Part of Master Detail

Lecture 61 Conclusion of the Implementation of the Master Detail Scenario

Section 9: RxJs Interoperability

Lecture 62 RxJs Interoperability

Lecture 63 Understand toObservable() In Detail

Lecture 64 The toSignal() Interoperability Utility

Lecture 65 toSignal() Configuration Options - requireSync and initialValue

Lecture 66 Understanding toSignal() Error Handling 2

Section 10: Conclusion

Lecture 67 Bonus Lecture June 2024 : These coupons have been recently updated

Lecture 68 Modern Angular With Signals - Conclusion and Key Takeways

Developers looking to learn how to build Angular applications using Signals