Angular Signals In Depth (Angular 18)

Focused View

Angular University

6:22:19

0 View

1. Introduction To Angular Signals

1. Modern Angular With Signals - Introduction.mp4

01:53

2. IMPORTANT - Recommended Software Versions.html

3. Setting Up Your Development Environment.mp4

09:15

4. Writing Your First Angular Signal.mp4

07:41

5. Why Angular Signals Main Benefits.mp4

04:55

6. The Current State of Signal-Based Change Detection.mp4

03:06

7. The Angular signals update API and Read-Only Signals.mp4

03:08

8. Angular Signals and Immutability - Objects.mp4

05:55

9. Angular Signals and Immutability - Arrays.mp4

05:59

10. Angular Computed Signals - Everything You Need To Know.mp4

08:07

11. Angular Signal Effects - Everything You Need To Know.mp4

06:36

12. Angular Signal Effects - Setting The Injection Context.mp4

06:30

13. Angular Signal Effects - When To Use allowSignalWrites.mp4

04:01

14. Angular Signal Effects - How To Do Manual Effect Cleanup.mp4

09:27

2. Complete CRUD Example With Angular Signals

1. Introduction To The Complete CRUD With Signals Section.mp4

04:39

2. Why Making RxJs Optional In Angular.mp4

11:35

3. CRUD Read Operation - Defining The API of our Service Layer.mp4

06:22

4. Angular HTTP Service Layers - Two Different Options.mp4

08:58

5. Fetching Data From the Service Layer With Error Handling.mp4

07:19

6. Loading Data With OnInit or afterNextRender.mp4

02:36

7. Angular Service Layers With The HTTP Client and async await.mp4

07:50

8. Defining Derived Data Declaratively Using computed().mp4

04:16

9. Angular Signal Inputs - Optional and Required Inputs.mp4

06:26

10. CRUD - Display a List of Courses.mp4

05:18

11. CRUD Service Layer - Fetch Implementation.mp4

07:49

12. CRUD Service Layer with async await and the Angular HTTP Client.mp4

08:11

13. CRUD Update - Opening the Edit Course Dialog.mp4

11:49

14. CRUD Update Edit Course Form.mp4

06:10

15. CRUD Update - Triggering the HTTP PUT Call.mp4

06:21

16. CRUD Update - Updating the UI.mp4

06:32

17. CRUD Delete - Full Implementation.mp4

05:39

18. CRUD Create Course Implementation.mp4

07:37

3. Angular Signal-Based Loading Indicator

1. New Section - Signal-Based Angular Loading Indicator.mp4

04:18

2. Signal-Based Loading Indicator - Shared Signal Service.mp4

07:58

3. Loading Indicator HTTP Interceptor.mp4

06:03

4. Skipping The Loading Indicator Using an HTTP Context.mp4

04:28

4. Angular Signal-Based User Messages and Error Handling

1. Signal-Based User Messages - Shared Service.mp4

04:16

2. Messages Component - Step-by-Step Implementation.mp4

04:26

3. Messages Signal-Based Service Demo.mp4

02:59

5. Angular Signal-Based Authentication

1. Angular Signal-Based Authentication.mp4

01:18

2. Implementing The Login Form.mp4

04:46

3. Authentication Signal-Based Service.mp4

01:49

4. Adapting the UI To The User Authentication Status.mp4

03:04

5. Implementing Logout.mp4

02:14

6. Save User Profile In Local Storage - Survive Refreshes.mp4

05:16

7. Implementing an Authentication Guard With Signals.mp4

04:38

6. Model Inputs

1. Model Inputs.mp4

06:54

2. Model Inputs and Two-Way Data Binding.mp4

07:03

3. Before Continuing- Tiding Up a Couple of Issues.mp4

02:35

7. Building the View Course Page

1. Building the View Course Page.mp4

04:17

2. Implementing the Template of The Course Component.mp4

02:03

3. Implementing The Course Resolver.mp4

08:33

4. Implementing the Lessons Service.mp4

04:40

5. Implementing the Lessons Resolver.mp4

03:25

8. Master Detail UI Pattern

1. Master Detail UI Pattern.mp4

04:26

2. Master Detail - Implement The Search Lessons Form.mp4

04:46

3. Angular Signal Queries - viewChild.mp4

08:59

4. The ViewChildren Signal Query.mp4

04:58

5. Conclusion of the Implementation of the Master Detail Scenario.mp4

07:57

6. Beginning of the Implementation of the Detail Part of Master Detail.mp4

08:12

7. Conclusion of the Implementation of the Master Detail Scenario.mp4

09:27

9. RxJs Interoperability

1. RxJs Interoperability.mp4

05:55

2. Understand toObservable() In Detail.mp4

05:33

3. The toSignal() Interoperability Utility.mp4

03:27

4. toSignal() Configuration Options - requireSync and initialValue.mp4

05:37

5. Understanding toSignal() Error Handling 2.mp4

07:53

10. Conclusion

1. Bonus Lecture June 2024 These coupons have been recently updated.html

2. Modern Angular With Signals - Conclusion and Key Takeways.mp4

06:06

Description

Learn how to build modern Angular 18 applications with the new Signals API. Learn common signal-based UI patterns.

What You'll 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 is this for?

Developers looking to learn how to build Angular applications using Signals

What You Need to Know?

Some Typescript, HTML & CSS

Some basic knowledge of Angular is all that you need

More details

Description
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!
Who this course is for:
Developers looking to learn how to build Angular applications using Signals

User Reviews

Rating

average 0

Total votes0

Focused display

Angular

Angular University

Instructor's Courses

Hello, I'm Vasco Cavalheiro and I'm an online instructor at the Angular University.Over the years I have helped over 100k developers to learn the Angular framework and its surrounding ecosystem of technologies.Check out my Linkedin in the links section on the top right.About the Angular University:The Angular University aims to be the one place that you go in order to learn and keep up with the whole Angular ecosystem. We provide premium quality video tutorials, screencast style.No matter if you are a beginner, intermediate or advanced in Angular, we have several courses for you.More about me:I'm a Software Developer with many years of experience, very seasoned building user interfaces with Angular. I've worked as a Frontend Developer/Architect in a large variety of enterprise projects throughout the years. I worked on a ton of projects, everything from single page applications to help build the European Criminal Record Information Exchange System, to brand new e-banking portals, to corporate banking portals, and more. I've been a key part of internal framework teams that built frameworks for in-house departments of tens of developers. I also love to teach, write and talk about technology. I am looking forward to be your Angular instructor,Kind Regards,Vasco

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.