OpenCourser brand icon
Sign in
We may earn an affiliate commission when you visit our partners.

Modern Angular 19 with Signals - The missing guide

Kobi Hari

Master Angular Signals: Modern Change Detection and Zoneless Applications

Unlock the full potential of Angular's newest feature—Signals. Learn the modern way to prgram in Angular using  Signals, Standalone Architecture, the new functional APis, and all the latest features, including the ones introduced in Version 19.

Read more

Master Angular Signals: Modern Change Detection and Zoneless Applications

Unlock the full potential of Angular's newest feature—Signals. Learn the modern way to prgram in Angular using  Signals, Standalone Architecture, the new functional APis, and all the latest features, including the ones introduced in Version 19.

Whether you're a beginner looking to understand signals or a seasoned Angular developer seeking to deepen your expertise, this course provides both theoretical insights and practical knowledge. By gaining a deep understanding of how signals work, you’ll gain the confidence to build efficient, scalable, and future-proof applications while avoiding common pitfalls.

  • First - understand why angular is moving to zoneless applications using signals. Dive into the fundamentals of the event loop, tasks, and how zone-based change detection works. You'll discover why Angular is shifting towards zoneless architectures and the challenges posed by using RxJS and push-based change detection in large-scale applications.

  • Then - meet signals. Learn about the basic primitives of signals, including their relationship to injection and reactive contexts. You’ll learn how to work with writable and computed signals, and how to implement effects and handle RxJS interoperability. You'll also discover Angular 19s "linkedSignal". These foundational concepts will help you start using signals effectively in your applications.

  • Once the basics are covered, we dive deep into how signals are implemented under the hood to give you a more advanced, intuitive understanding of their behavior. This deep understanding of how signals and injection contexts work will help you avoid the pitfalls of this seemingly simple feature, enabling you to use signals effectively and confidently.

  • Angular 19’s new signal-based component API is a game-changer for modern Angular development. In this course, you’ll learn how to integrate signals directly into your components, significantly improving performance and reducing complexity. We’ll explore how the deep understanding of signals and injection contexts is essential to mastering these APIs and avoiding common mistakes. With this knowledge, you’ll be able to build more efficient, responsive, and scalable components that take full advantage of Angular’s latest features.

  • Moving beyond components, we dive into building signal-based services. The course concludes with a comprehensive hands-on practical example, allowing you to apply everything you've learned throughout the course. We also cover the apis released in version 19: resource and rxResource. You will see how to incorporate them into your reactive services.

Enroll now

What's inside

Learning objectives

  • How to develop in angular using signals?
  • How to avoid the pitfalls of the signals feature?
  • The new functional signal based apis of angular
  • See the new standalone architecture in action
  • What are the newest best practices?
  • How change detection works and what is a zoneless application?
  • How to use the newest features to simplify your application structure
  • Learn the newest signal related apis of angular 19

Syllabus

The students will understand the structure and content of the course. They will know where to get the material from, how to set up their development environment and where to practice their new skills
Read more
Introduction
Course Outline
How to practice in this course?
Understand the role of Zone and the automatic change detection and why Angular is moving away from it. Understand the complexity of traditional reactive programming and why we need a simpler pattern
Section Introduction: Why would we want to use signals?

Angular comes with a magic that we take for granted - the automatic change detection. This is the tool that is responsible for updating the DOM whenever we modify data that an element is bound to. To cleary see the effect of the automatic change detection - let's disable it by setting the change detection strategy to OnPush (which means that now the change detection is no longer fully automatic and does no occur all the time). Now we see that when the component property changes, the new value is not reflected in the DOM

When we use the OnPush strategy the change detection mechanism is triggered in one of two was:

1. When an Angular event, output, or input is triggered

2. When we use the ChangeDetectorRef and call it programatically

Try it yourself - Change Detection

In this lecture we will understand when change detection means and how it is implemented. We will briefly discuss what ZoneJS does and how change detection is implemented using it. We will see the freqency in which change detection may execute and how it affects the performance of our applications.

Performance of Automatic Change Detection
Understanding the async pipe and how it works
Try it yourself - Using async pipe with push change detection
RxJS State management challanges - Part 1
RxJS State management challanges - Part 2
Zoneless applications and the future of Angular programming
Create new signals, modify them properly, derive computed signals, respond to signal changes and use them in the HTML templates
Section introduction - Welcome to signals
Creating writeable signals
Modifying a writeable signal
Creating computed signals
Try it yourself - Writeable and Computed Signals
Reacting to signal changes using Effects
Try it yourself - Effects
LinkedSignal (Angular 19) - A Writeable AND Computed Signal
Try it yourself (Angular 19) - Linked Signal
Advanced topics relating to singals. Injection context and how it affects them, interoperability with rxjs. The update cycle.
Introduction: How do signals work?
DestroyRef, inject() and Injection Context
Injecting Dependencies when not in Injection Context
Signals and Injection Context
Try it yourself: Signals and Injection Context
Understanding Reactive Context
Reactive Contexts and Effects
Interoperability with rxjs
Interoperability with rxjs - part 2
Try it yourself: Converting observables into signals and vice versa
Signals and Immutability
Try it yourself: Immutable updates
The new angular api implementation using signals instead of directives.
Introduction to modern angular using signals
Functional programming in Angular
The input function
Try it yourself: Signal inputs
The output function
Model inputs
Try it yourself: The output and model functions
Signal based View queries using viewChild and viewChildren functions
Timing of signal based child queries
Signal based contentChild and contentChildren
Try it yourself: viewChild and contentChild
HostBinding and HostListener in signal based apps
Binding router data to component inputs
Try it yourself: Binding router data into inputs
Learn how to create stateful services that lavarage angular signals to hold and modify state
Introduction to signal based services
Code Along: Signal Based Service
Stateful services using Behavior Subjects
Holding the state in signals
Exposing writeable signals as read only
Adding computed signals
Consuming the service in the components
Updating State - Synchronously
Triggering APIs using RxJS Interop
Code Along: Resource APIs
The (Angular 19) resource API - Link Signals and Promises
The (Angular 19) rxResource API - Link Signals and Observables
Summary
What we have covered
What's next?
Final words
Bonus Lecture

Save this course

Save Modern Angular 19 with Signals - The missing guide to your list so you can find it easily later:
Save

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 Modern Angular 19 with Signals - The missing guide with these activities:
Review RxJS Fundamentals
Strengthen your understanding of RxJS concepts, as the course contrasts Signals with RxJS-based approaches to state management.
Browse courses on RxJS
Show steps
  • Review the core concepts of Observables, Subjects, and Operators.
  • Practice creating and subscribing to Observables.
  • Experiment with common RxJS operators like map, filter, and reduce.
Read 'Angular Development with TypeScript'
Gain a broader understanding of Angular development practices to better contextualize the use of Signals within a larger application.
View Typescript Quickly on Amazon
Show steps
  • Read the chapters related to component architecture and data binding.
  • Pay attention to the sections on services and dependency injection.
  • Consider how Signals might simplify some of the patterns described in the book.
Implement Simple Components with Signals
Reinforce your understanding of Signals by building small, focused components that utilize them for state management and change detection.
Show steps
  • Create a simple counter component using Signals.
  • Build a basic form with Signal-based input binding.
  • Implement a component that fetches and displays data using Signals.
Four other activities
Expand to see all activities and additional details
Show all seven activities
Read 'Effective TypeScript'
Improve your TypeScript skills to write better Angular code.
View Effective Typescript on Amazon
Show steps
  • Read the chapters related to TypeScript best practices.
  • Pay attention to the sections on types and interfaces.
  • Consider how to apply these best practices to your Angular code.
Blog Post: Signals vs. RxJS
Solidify your understanding of the differences between Signals and RxJS by writing a blog post comparing their approaches to reactive programming.
Show steps
  • Research the key differences between Signals and RxJS.
  • Outline the pros and cons of each approach.
  • Write a clear and concise blog post explaining your findings.
  • Publish your blog post on a platform like Medium or Dev.to.
Migrate a Small App to Signals
Gain practical experience with Signals by migrating a small existing Angular application to use Signals for state management.
Show steps
  • Choose a small Angular application to migrate.
  • Identify areas where Signals can replace existing state management solutions.
  • Implement the migration, testing thoroughly.
  • Document the changes and lessons learned.
Contribute to a Signals Library
Deepen your understanding of Signals by contributing to an open-source library that utilizes them.
Show steps
  • Find an open-source library that uses Signals.
  • Identify a bug or feature to work on.
  • Contribute code, documentation, or tests.
  • Participate in code reviews.

Career center

Learners who complete Modern Angular 19 with Signals - The missing guide will develop knowledge and skills that may be useful to these careers:
Frontend Developer
A frontend developer is responsible for implementing visual elements and functionality that users interact with in a web application. This course on Modern Angular 19 with Signals provides knowledge of the latest features in Angular, particularly Signals, which are essential for building responsive and efficient user interfaces. By understanding change detection and zoneless applications, you, as a frontend developer, can optimize the application's performance. The course covers practical applications of Signals, including the new signal-based component API that improve performance and reduce complexity, enabling you to build modern Angular applications.
See salaries and explore the career path for Frontend Developer
UI Engineer
A UI engineer specializes in building the user interface of web applications, ensuring a seamless and engaging experience. The course on Modern Angular 19 with Signals equips UI engineers with the knowledge and skills to leverage the newest Angular features, particularly Signals, to enhance UI performance and responsiveness. The course's focus on signal-based components and services directly translates into improved UI development practices. The comprehensive coverage of Signals and their implementation, including the new APIs introduced in Angular 19, enables you, as a UI engineer, to craft more efficient and scalable user interfaces.
See salaries and explore the career path for UI Engineer
Web Application Developer
A web application developer focuses on creating interactive and dynamic web applications. The course on Modern Angular 19 with Signals is highly relevant for anyone aiming to develop cutting-edge web applications using Angular. The course covers the fundamentals of Signals, from basic primitives to advanced topics like injection context and RxJS interoperability. By diving deep into how Signals work, you, as a web application developer, can confidently use these tools to build efficient and responsive applications. The hands-on examples and practical exercises in the course allow you to apply what you've learned directly to your projects.
See salaries and explore the career path for Web Application Developer
Software Engineer
A software engineer designs, develops, and tests software applications. This course on Modern Angular 19 with Signals helps software engineers stay current with the latest Angular features, such as Signals, standalone architecture, and the new functional APIs. Understanding change detection and zoneless applications, as covered in the course, is crucial for building scalable and maintainable applications. The course provides insights into the practical implementation of Signals, including how to integrate them into components and build signal-based services, making you, as a software engineer, more effective in modern Angular development.
See salaries and explore the career path for Software Engineer
Application Developer
An application developer is involved in the design, development, and maintenance of applications. The focus of this course on Modern Angular 19 with Signals is helpful for application developers looking to stay current with Angular. This course goes over the newest features, like Signals. Further, it explores change detection and zoneless applications. This helps application developers develop skills to build scalable applications. This learning helps you, the application developer, become more effective in your role.
See salaries and explore the career path for Application Developer
Full-Stack Developer
A full stack developer works on both the frontend and backend of web applications. This course on Modern Angular 19 with Signals enhances your frontend skills by providing a deep understanding of Angular's latest features. The course covers essential topics such as change detection, zoneless applications, and the implementation of Signals in components and services. Understanding how to optimize the frontend with Signals allows you, as a full stack developer, to create more efficient and responsive applications. The course's practical examples and hands-on exercises help you integrate these new features into your projects.
See salaries and explore the career path for Full-Stack Developer
Application Architect
An application architect is responsible for designing the overall structure and architecture of software applications. This course on Modern Angular 19 with Signals helps application architects understand how to leverage the latest Angular features, particularly Signals, to build more efficient and maintainable applications. The course covers advanced topics such as change detection, zoneless applications, and signal-based services. By understanding these concepts, you, as an application architect, can make informed decisions about how to structure Angular applications and optimize their performance. The course's comprehensive coverage of Signals provides a solid foundation for designing modern Angular architectures.
See salaries and explore the career path for Application Architect
Technology Lead
A technology lead oversees a team of developers and makes technical decisions for software projects. This course on Modern Angular 19 with Signals enables technology leads to stay informed about the latest Angular features and best practices. The course covers essential topics such as Signals, standalone architecture, and the new functional APIs, providing a comprehensive understanding of modern Angular development. By understanding these concepts, you, as a technology lead, can guide your team in adopting new technologies and building more efficient and scalable applications. The course's practical examples and hands-on exercises help you evaluate the impact of these new features on your projects.
See salaries and explore the career path for Technology Lead
Solution Architect
A solutions architect designs and implements solutions to complex business problems using technology. This course on Modern Angular 19 with Signals helps solution architects understand how to leverage the latest Angular features to build efficient and scalable web applications. The course covers essential topics such as Signals, change detection, and zoneless applications, providing a comprehensive understanding of modern Angular development. By understanding these concepts, you, as a solution architect, can design solutions that take full advantage of Angular's capabilities and meet your clients' needs. The course's practical examples and hands-on exercises help you validate your architectural designs.
See salaries and explore the career path for Solution Architect
Software Consultant
A software consultant advises clients on software development strategies and best practices. This course on Modern Angular 19 with Signals helps consultants provide informed recommendations on Angular development. The course covers essential topics such as Signals, change detection, and zoneless applications, providing a deep understanding of modern Angular development. By understanding these concepts, you, as a software consultant, can assess the suitability of new technologies for your clients' projects and guide them in adopting best practices. The course's practical examples and hands-on exercises help you demonstrate the benefits of these new features to your clients.
See salaries and explore the career path for Software Consultant
Technical Trainer
A technical trainer educates developers on new technologies and best practices. This course on Modern Angular 19 with Signals equips technical trainers with the knowledge and skills to teach Angular's latest features effectively. The course includes comprehensive coverage of Signals, standalone architecture, and the new functional APIs. By understanding these concepts, you, as a technical trainer, can develop engaging and informative training materials for your students. The course's practical examples and hands-on exercises provide valuable resources for your training sessions.
See salaries and explore the career path for Technical Trainer
Mobile Application Developer
A mobile application developer designs and builds applications for mobile devices. While this course focuses on Angular, the principles of building efficient and scalable applications translate well to mobile development, particularly if you, as a mobile application developer, are using frameworks like Ionic or NativeScript that leverage Angular. The course's coverage of Signals and change detection can help optimize the performance of mobile applications. The knowledge gained from this course may be useful in understanding how to manage state and data flow in your mobile applications.
See salaries and explore the career path for Mobile Application Developer
Quality Assurance Engineer
A Quality Assurance Engineer, or QA Engineer, works to ensure the quality of code. This course explores Angular Signals, so it may be useful for writing tests for Angular applications. The newest version of Angular uses Signals, covered in the course, so understanding the fundamentals of the platform may be useful. This helps you, as the Quality Assurance Engineer, write better tests.
See salaries and explore the career path for Quality Assurance Engineer
Backend Developer
A backend developer is responsible for server side logic. While the course focuses on frontend, it may be useful to backend developers. The course will provide insight into how applications work. This may help you, as a backend developer, understand how to write efficient and scalable code.
See salaries and explore the career path for Backend Developer
Technical Writer
A technical writer creates documentation for software products. While this course may not directly correlate, the course may be useful in understanding Angular. If you, as the technical writer, need to produce technical documentation for Angular, the course may be useful. By seeing the new Signal features in action, you may be able to improve your documentation.
See salaries and explore the career path for Technical Writer

Reading list

We've selected two books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Modern Angular 19 with Signals - The missing guide.
Cover image
Typescript Quickly
Save
Provides a comprehensive guide to Angular development, covering TypeScript, components, services, and more. It's a useful reference for understanding the broader Angular ecosystem in which Signals are used. While not directly focused on Signals, it provides valuable context and best practices for Angular development. It is commonly used as a textbook at academic institutions.
Typescript Quickly
Paperback
Check
Typescript Quickly
Kindle Edition
Check
Cover image
Effective Typescript
Save
Provides 62 specific ways to improve your TypeScript. Because Angular is written in TypeScript, this book will help you write better Angular code. It is more valuable as additional reading than it is as a current reference. It is commonly used as a textbook at academic institutions or by industry professionals.
Effective Typescript
Paperback
Check
Effective Typescript
Kindle Edition
Check

Share

Help others find this course page by sharing it with your friends and followers:
Facebook
LinkedIn
Reddit
X
Link
Email

Similar courses

Similar courses are unavailable at this time. Please try again later.
Effort
6 total hours
Via
Udemy
Instructor
Kobi Hari
Language
English
Share and help others discover this course.
Facebook LinkedIn X Reddit Link Email
Don't miss out
Enroll today to gain access to this course
Enroll in this course
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2025 OpenCourser