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.
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.
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
- 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
Syllabus
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
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.
Traffic lights
Save this course
Save
Reviews summary
Mastering angular signals & angular 19
Instructor is knowledgeable and explains well.
Explains ZoneJS and zoneless applications.
Helps solidify understanding with hands-on practice.
Features the latest Angular 19 signal APIs.
Excellent explanation of Angular Signals' fundamentals.
Activities
Review RxJS Fundamentals
Show steps
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'
Show steps
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
Show steps
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'
Show steps
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
Show steps
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
Show steps
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
Show steps
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.
Review RxJS Fundamentals
Show steps
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'
Show steps
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
Show steps
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.
Read 'Effective TypeScript'
Show steps
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
Show steps
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
Show steps
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
Show steps
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
Frontend Developer
UI Engineer
Web Application Developer
Software Engineer
Application Developer
Full-Stack Developer
Application Architect
Technology Lead
Solution Architect
Software Consultant
Technical Trainer
Mobile Application Developer
Quality Assurance Engineer
Backend Developer
Technical Writer
Reading list
Save
Save
Share
Similar courses
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.
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.
