Angular Signals In Depth (Angular 19) from Udemy

This Course In a Nutshell

I'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 Overview

So 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 Contents

This course covers the following topics:

Deep dive into Angular Signals
About signal-based change detection
Computed Signals
Effects
The new signal-based component API: inputs and outputs
Complete CRUD example with signals
HTTP with optional RxJs (two ways of doing it)
Error handling and signals
Loading indicators with signals
Stateful signal-based services
Handling user error messages with signals
Angular Authentication with signals
Signal-based view queries
viewChild, viewChildren, contentChild, contentChildren
Bi-directional binding with signals and the model() API
Master-detail scenario with Signals
RxJs Interoperability
Conclusion and final Thoughts

What 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.

What's inside

Syllabus

Introduction To Angular Signals

Modern Angular With Signals - Introduction

IMPORTANT - Recommended Software Versions

Setting Up Your Development Environment

Writing Your First Angular Signal

Why Angular Signals? Main Benefits

The Current State of Signal-Based Change Detection

The Angular signals update API and Read-Only Signals

Angular Signals and Immutability - Objects

Angular Signals and Immutability - Arrays

Angular Computed Signals - Everything You Need To Know

Angular Signal Effects - Everything You Need To Know

Angular Signal Effects - Setting The Injection Context

Angular Signal Effects - How To Do Manual Effect Cleanup

Complete CRUD Example With Angular Signals

Introduction To The Complete CRUD With Signals Section

Why Making RxJs Optional In Angular?

CRUD Read Operation - Defining The API of our Service Layer

Angular HTTP Service Layers - Two Different Options

Fetching Data From the Service Layer With Error Handling

Loading Data With OnInit or afterNextRender

Angular Service Layers With The HTTP Client and async / await

Defining Derived Data Declaratively Using computed()

Angular Signal Inputs - Optional and Required Inputs

CRUD - Display a List of Courses

CRUD Service Layer - Fetch Implementation

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

CRUD Update - Opening the Edit Course Dialog

CRUD Update Edit Course Form

CRUD Update - Triggering the HTTP PUT Call

CRUD Update - Updating the UI

CRUD Delete - Full Implementation

CRUD Create Course Implementation

Angular Signal-Based Loading Indicator

New Section - Signal-Based Angular Loading Indicator

Signal-Based Loading Indicator - Shared Signal Service

Loading Indicator HTTP Interceptor

Skipping The Loading Indicator Using an HTTP Context

Angular Signal-Based User Messages and Error Handling

Signal-Based User Messages - Shared Service

Messages Component - Step-by-Step Implementation

Messages Signal-Based Service Demo

Angular Signal-Based Authentication

Implementing The Login Form

Authentication Signal-Based Service

Adapting the UI To The User Authentication Status

Implementing Logout

Save User Profile In Local Storage - Survive Refreshes

Implementing an Authentication Guard With Signals

Model Inputs

Model Inputs and Two-Way Data Binding

Before Continuing- Tiding Up a Couple of Issues

Building the View Course Page

Implementing the Template of The Course Component

Implementing The Course Resolver

Implementing the Lessons Service

Implementing the Lessons Resolver

Master Detail UI Pattern

Master Detail - Implement The Search Lessons Form

Angular Signal Queries - viewChild

The ViewChildren Signal Query

Conclusion of the Implementation of the Master Detail Scenario

Beginning of the Implementation of the Detail Part of Master Detail

RxJs Interoperability

Understand toObservable() In Detail

The toSignal() Interoperability Utility

toSignal() Configuration Options - requireSync and initialValue

Understanding toSignal() Error Handling 2

New Signal Features: linkedSignal() and resource()

Understanding Angular linkedSignal()

Understanding the Angular resource() API

Conclusion

Bonus Lecture (Updated February 2025)

Modern Angular With Signals - Conclusion and Key Takeways

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Angular Signals In Depth (Angular 19) with these activities:

Review RxJS Fundamentals

Show steps

Solidify your understanding of RxJS concepts, as the course covers RxJS interoperability with Signals and understanding when RxJS might still be needed.

Browse courses on RxJS

Show steps

Review RxJS Observables, Subjects, and Operators.
Practice creating and subscribing to Observables.
Familiarize yourself with common RxJS operators like map, filter, and subscribe.

Angular Development with TypeScript, Second Edition

Show steps

Gain a deeper understanding of Angular architecture and best practices, which are essential for effectively using Signals.

View Melania on Amazon

Show steps

Read the chapters related to component architecture and data binding.
Review the sections on services and dependency injection.
Pay attention to the examples using TypeScript.

Simple Signal-Based Counter App

Show steps

Practice building a basic application using Angular Signals to reinforce the core concepts of signals, computed signals, and effects.

Show steps

Create a new Angular project.
Implement a counter component using signals for state management.
Add buttons to increment and decrement the counter value.
Display the counter value in the component's template.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Signal-Based Form Validation

Show steps

Implement form validation using Angular Signals to gain practical experience with reactive data flow and state management.

Show steps

Create a form with several input fields.
Define signals to represent the form's state and validation errors.
Use computed signals to derive validation status based on input values.
Display validation errors in the form's template.

Blog Post: Signals vs. RxJS

Show steps

Write a blog post comparing and contrasting Angular Signals with RxJS to deepen your understanding of their respective strengths and weaknesses.

Show steps

Research the key differences between Signals and RxJS.
Outline the pros and cons of each approach.
Provide code examples demonstrating the use of both Signals and RxJS.
Publish the blog post on a platform like Medium or Dev.to.

Programming Reactive Systems with RxJS

Show steps

Understand the underlying principles of reactive programming, which are crucial for effective Signal usage and RxJS interoperability.

View Putting Knowledge to Work on Amazon

Show steps

Read the chapters on Observables, Operators, and Subjects.
Focus on the sections explaining reactive data streams and transformations.
Try the examples provided in the book to reinforce your understanding.

Contribute to an Angular Signals Library

Show steps

Contribute to an open-source library that utilizes Angular Signals to gain real-world experience and collaborate with other developers.

Show steps

Find an open-source Angular library that uses Signals.
Identify a bug or feature request to work on.
Implement the fix or feature using Angular Signals.
Submit a pull request with your changes.

Career center

Learners who complete Angular Signals In Depth (Angular 19) will develop knowledge and skills that may be useful to these careers:

Frontend Developer

A Frontend Developer implements user interfaces and experiences for websites and applications. This course, focusing on Angular Signals, helps you become more proficient in building modern Angular applications using a signal-based component authoring API. You will learn how to handle data, manage application state, and implement reactive components using signals, which are essential skills for any Frontend Developer working with Angular. This course may be useful for those who want to stay current with the new direction of Angular. Also, you discover best practices for using signals in common application patterns, enabling you to develop robust and maintainable frontend solutions. Further, this course is unique in that it focuses on minimizing RxJs.

See salaries and explore the career path for Frontend Developer

Web Application Developer

A Web Application Developer specializes in building interactive web applications. This Angular Signals course may be useful in that it provides you with the knowledge and skills to create efficient and responsive web applications using Angular. You will learn how to implement features such as loading indicators, user messages, and authentication using signals, enabling you to deliver enhanced user experiences. The course's focus on practical examples and common application patterns allows one to apply these concepts immediately to web development projects. Taking this course in particular may help one leverage the new signal-based component API. A web application developer should be comfortable with Angular.

See salaries and explore the career path for Web Application Developer

Software Engineer

A Software Engineer designs, develops, and tests software applications. The course on Angular Signals helps Software Engineers build a solid understanding of reactive programming concepts and their application in Angular. By learning how to use signals for state management, change detection, and data binding, you may improve the performance and maintainability of your Angular applications. The course emphasis on building applications from scratch using the new signal-based component API, complete with CRUD examples, allows you to gain hands-on experience. If you are interested in leveraging signals to reduce dependencies on RxJs, this course may be particularly useful. The course may help software engineers who develop frontends.

See salaries and explore the career path for Software Engineer

UI Developer

A User Interface Developer is responsible for creating engaging and intuitive user interfaces. This course on Angular Signals provides a comprehensive understanding of how to leverage signals for building dynamic and reactive UIs. You will learn how to use computed signals and effects to manage UI state and implement complex interactions. The course's emphasis on the new signal-based component API, along with practical examples of features like loading indicators and user messages, may allow you to create compelling and user-friendly interfaces. Taking this course may allow one to learn how to reduce their usage of RxJs. A UI developer typically develops the presentation layer.

See salaries and explore the career path for UI Developer

Full-Stack Developer

A Full Stack Developer works on both the front-end and back-end aspects of web applications. This course on Angular Signals helps Full Stack Developers enhance their front-end skills by mastering the latest Angular features and best practices. You will learn how to build reactive UIs with signals, manage application state, and handle HTTP requests. The course's complete CRUD example and coverage of authentication allow one to develop end-to-end features efficiently. It may be useful for full stack developers to know about Angular signals. This course helps build upon your knowledge of the entire stack.

See salaries and explore the career path for Full-Stack Developer

Technical Lead

A Technical Lead guides a team of developers and oversees the technical aspects of software projects. This course on Angular Signals may help Technical Leads stay current with the latest Angular developments and guide their teams in adopting signal-based architectures. You will learn how to use signals for state management, change detection, and data binding, and how to leverage RxJs interoperability when needed. The course's practical examples and in-depth explanations allow one to mentor their team effectively and ensure high-quality code. Taking this course may help one stay current with the new direction that Angular is taking.

See salaries and explore the career path for Technical Lead

Application Architect

An Application Architect designs the structure and components of software applications. This course on Angular Signals may provide valuable insights into how to architect modern Angular applications using signals for state management and reactive programming. You will learn how to design scalable and maintainable applications by leveraging signal-based services and functional guards. The course's coverage of common application patterns and RxJs interoperability allows one to make informed decisions about application architecture and technology choices. Senior roles often require a master's degree. An application architect should have a deep understanding of Angular.

See salaries and explore the career path for Application Architect

JavaScript Developer

A JavaScript Developer specializes in building interactive web applications using JavaScript. This course on Angular Signals will help JavaScript Developers gain expertise in Angular and leverage signals to build modern, reactive applications. You will learn how to use signals for state management, change detection, and data binding, and how to integrate them with existing JavaScript frameworks and libraries. The course's practical examples and coverage of common application patterns allow one to apply these skills immediately to web development projects. This course may be useful as it helps build a solid foundation.

See salaries and explore the career path for JavaScript Developer

Software Architect

A Software Architect designs high-level system architectures and makes strategic technology decisions. This Angular Signals course provides valuable knowledge for designing scalable and maintainable Angular applications using signals. You will learn how to leverage signal-based services, functional guards, and RxJs interoperability to create robust and efficient architectures. The course's coverage of common application patterns and best practices allows one to make informed decisions about technology stacks and development methodologies. Software architects typically have an advanced degree. Taking this course might inform these architects of potential technology decisions.

See salaries and explore the career path for Software Architect

Mobile Application Developer

A Mobile Application Developer builds applications for mobile devices. While this Angular Signals course focuses on web applications, the concepts and techniques learned can be applied to mobile development using frameworks like Ionic or NativeScript, which support Angular. You will understanding how to manage state, handle asynchronous operations, and build reactive UIs using signals, which are valuable skills for building cross-platform mobile applications. The course's emphasis on practical examples and common application patterns allows one to adapt these concepts to mobile development projects. Mobile application developers should understand Angular.

See salaries and explore the career path for Mobile Application Developer

Software Development Engineer in Test

A Software Development Engineer in Test (SDET) is responsible for designing and implementing automated tests for software applications. This course on Angular Signals may help SDETs understand how to test Angular applications that use signals for state management and reactive programming. You will knowledge of how signals affect change detection and data binding, allowing you to write more effective and targeted tests. The course's coverage of common application patterns and RxJs interoperability may allow you to develop comprehensive test strategies for Angular applications. Gaining a better understanding of Angular is valuable for any software development engineer.

See salaries and explore the career path for Software Development Engineer in Test

Quality Assurance Engineer

A Quality Assurance Engineer ensures the quality and reliability of software applications. This course on Angular Signals may help Quality Assurance Engineers understand how signals are used in Angular applications and how to test them effectively. You will gain insight into signal-based change detection and data binding, which may allow you to identify potential issues and ensure that the application behaves as expected. The course's practical examples and coverage of common application patterns may allow you to develop comprehensive test plans and strategies. The course's material would allow one to test a web application.

See salaries and explore the career path for Quality Assurance Engineer

DevOps Engineer

A DevOps Engineer automates and streamlines the software development and deployment process. While this course on Angular Signals primarily focuses on front-end development, the knowledge gained can be useful for DevOps Engineers involved in deploying and managing Angular applications. You will gain knowledge of the application's architecture and dependencies, which helps you optimize the deployment process and troubleshoot any issues that may arise. The course's coverage of RxJs interoperability may allow you to understand how different parts of the application interact with each other. It is helpful for DevOps to understand the technology that they deploy.

See salaries and explore the career path for DevOps Engineer

Technical Writer

A Technical Writer creates documentation for software applications and systems. This course on Angular Signals will help Technical Writers gain a deeper understanding of Angular and its signal-based architecture. You will learn how signals are uses for state management, change detection, and data binding, which may allow you to write clear and accurate documentation for developers and users. The course's practical examples and coverage of common application patterns may allow you to create comprehensive guides and tutorials. A technical writer should understand the technology for which they write.

See salaries and explore the career path for Technical Writer

Project Manager

A Project Manager is responsible for planning, executing, and closing software projects. This course on Angular Signals will help Project Managers gain a general understanding of Angular and its signal-based architecture. You will learn about the key components of Angular applications and how they interact with each other, which helps you manage project timelines and allocate resources effectively. The course's coverage of common application patterns may allow one to communicate more effectively with developers and stakeholders. This course may be useful for project managers who work with Angular-based projects.

See salaries and explore the career path for Project Manager

Angular Signals In Depth (Angular 19)

What's inside

Syllabus

Save this course

Activities

Career center

Reading list

Share

Similar courses