
Set up the angular signals development environment by installing node and an IDE. Run the back end on 9000 and the front end on 4200 to explore signals.
Explore computed signals in Angular, a read-only derived signal recalculated from source signals, with examples like ten x counter and 100 x counter, and learn to avoid dependency cycles.
Open the edit course dialog via Angular Material to update a course, send changes to the back end, and refresh the screen to display updated data.
Update the ui after saving a course by emitting a course updated event from the course card list, then update the in memory courses signal in the home component.
Implement the create course flow in Angular signals by using the edit course dialog in create mode, a dialog service, and a back-end create call, updating the UI via signals.
Implement a loading indicator with a functional angular http interceptor that turns on before requests and off after completion. Configure it to apply to all http calls with optional opt-out.
Inject the shared message service and create a message signal to display and style alerts by severity using NgClass, with a close action to clear the panel.
Learn how to use model inputs, a writeable signal that enables two-way binding between a parent and child component, demonstrated with a course category combobox and value model input.
Implement the master-detail flow by loading lessons via the lesson service, displaying them in a master table, then switching to a detail view with back navigation and signals-driven updates.
Learn RxJs interoperability by converting a signal to an observable and vice versa, using two observable, with emphasis on dependency injection context and avoiding memory leaks.
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!