Angular Signals In Depth (Angular 18)

Angular Signals In Depth (Angular 18), available at $54.99, has an average rating of 4.67, with 68 lectures, based on 205 reviews, and has 1476 subscribers.

You will learn about 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 This course is ideal for individuals who are Developers looking to learn how to build Angular applications using Signals It is particularly useful for Developers looking to learn how to build Angular applications using Signals.

Enroll now: Angular Signals In Depth (Angular 18)

Summary

Title: Angular Signals In Depth (Angular 18)

Price: $54.99

Average Rating: 4.67

Number of Lectures: 68

Number of Published Lectures: 68

Number of Curriculum Items: 68

Number of Published Curriculum Objects: 68

Original Price: $74.99

Quality Status: approved

Status: Live

What You Will 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

Who Should Attend

Developers looking to learn how to build Angular applications using Signals

Target Audiences

Developers looking to learn how to build Angular applications using Signals

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!

Course Curriculum

Chapter 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

Chapter 2: Complete CRUD Example With Angular Signals

Lecture 1: Introduction To The Complete CRUD With Signals Section

Lecture 2: Why Making RxJs Optional In Angular?

Lecture 3: CRUD Read Operation – Defining The API of our Service Layer

Lecture 4: Angular HTTP Service Layers – Two Different Options

Lecture 5: Fetching Data From the Service Layer With Error Handling

Lecture 6: Loading Data With OnInit or afterNextRender

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

Lecture 8: Defining Derived Data Declaratively Using computed()

Lecture 9: Angular Signal Inputs – Optional and Required Inputs

Lecture 10: CRUD – Display a List of Courses

Lecture 11: CRUD Service Layer – Fetch Implementation

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

Lecture 13: CRUD Update – Opening the Edit Course Dialog

Lecture 14: CRUD Update Edit Course Form

Lecture 15: CRUD Update – Triggering the HTTP PUT Call

Lecture 16: CRUD Update – Updating the UI

Lecture 17: CRUD Delete – Full Implementation

Lecture 18: CRUD Create Course Implementation

Chapter 3: Angular Signal-Based Loading Indicator

Lecture 1: New Section – Signal-Based Angular Loading Indicator

Lecture 2: Signal-Based Loading Indicator – Shared Signal Service

Lecture 3: Loading Indicator HTTP Interceptor

Lecture 4: Skipping The Loading Indicator Using an HTTP Context

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

Lecture 1: Signal-Based User Messages – Shared Service

Lecture 2: Messages Component – Step-by-Step Implementation

Lecture 3: Messages Signal-Based Service Demo

Chapter 5: Angular Signal-Based Authentication

Lecture 1: Angular Signal-Based Authentication

Lecture 2: Implementing The Login Form

Lecture 3: Authentication Signal-Based Service

Lecture 4: Adapting the UI To The User Authentication Status

Lecture 5: Implementing Logout

Lecture 6: Save User Profile In Local Storage – Survive Refreshes

Lecture 7: Implementing an Authentication Guard With Signals

Chapter 6: Model Inputs

Lecture 1: Model Inputs

Lecture 2: Model Inputs and Two-Way Data Binding

Lecture 3: Before Continuing- Tiding Up a Couple of Issues

Chapter 7: Building the View Course Page

Lecture 1: Building the View Course Page

Lecture 2: Implementing the Template of The Course Component

Lecture 3: Implementing The Course Resolver

Lecture 4: Implementing the Lessons Service

Lecture 5: Implementing the Lessons Resolver

Chapter 8: Master Detail UI Pattern

Lecture 1: Master Detail UI Pattern

Lecture 2: Master Detail – Implement The Search Lessons Form

Lecture 3: Angular Signal Queries – viewChild

Lecture 4: The ViewChildren Signal Query

Lecture 5: Conclusion of the Implementation of the Master Detail Scenario

Lecture 6: Beginning of the Implementation of the Detail Part of Master Detail

Lecture 7: Conclusion of the Implementation of the Master Detail Scenario

Chapter 9: RxJs Interoperability

Lecture 1: RxJs Interoperability

Lecture 2: Understand toObservable() In Detail

Lecture 3: The toSignal() Interoperability Utility

Lecture 4: toSignal() Configuration Options – requireSync and initialValue

Lecture 5: Understanding toSignal() Error Handling 2

Chapter 10: Conclusion

Lecture 1: Bonus Lecture (Updated August 2024)

Lecture 2: Modern Angular With Signals – Conclusion and Key Takeways

Instructors

Angular University
Best Selling Angular Courses | 200k+ students | 17 courses

Rating Distribution

1 stars: 1 votes
2 stars: 3 votes
3 stars: 9 votes
4 stars: 56 votes
5 stars: 140 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

Menu