วีดีโอ

So I am clear on your question, which part of this code are you referring to? The error handling is in a generalized function that can be reused in any application. On my Angular projects, one goal is to keep the component code as simple as possible. Hence the reason that the service provides the specific signals that the component needs. But if you are comfortable with working with the resourceRef object in the template, you could make that public (instead of private as I have) and access all of those properties (isLoaded, error) directly in the component.

Separation of concerns I would say

Yes, separation of concerns. I like to think of the component as the mediator between the service and the view. Plus it makes it easier to make additional modifications to the data or react to changes in that data in the component, as needed. It's difficult to see that benefit in my very simple sample application, because all I'm doing with that data is display it. But in more *real* applications, there is often data interaction. Some of that interaction may require additional computations or other logic.

Thank you so much!

Are you asking about .spec file naming conventions? Or looking for them in my sample application? No, I don't use Cypress.

@@deborah_kurata Cypress is so useful and much better than Angular test...

@@deborah_kurata it works with Google Chrome video recorder

@@deborah_kurata th-cam.com/video/-RJuZrq-wOk/w-d-xo.html

Gracias! 😊

Yep! I'm enjoying using the resource api. Could you elaborate on caching? Are you referring to caching data? Signals in a service provided in "root" are "cached" and stored in the signal for the lifetime of the application. Regarding optimization, I'm not clear on your question. Are you referring to optimizing data retrieval? Or component loading?

@@deborah_kurata thanks for the reply. I meant caching using the resourceapi :) if there was something to leverage caching of requests

So something like this: developer.mozilla.org/en-US/docs/Web/HTTP/Caching As I mentioned, signals in a service provided in "root" handles the "private" caching.

@@deborah_kurata thanks! :)

Thank you! And since these are new features, the videos should be useful for experienced Angular developers as well. 😊

Thanks! Glad you're liking the series. 😊 Hope I'm able to answer all of your questions over the next several videos!

I kept the "Getting Started" carefully updated through every release and change for over 5 years. Pluralsight no longer allows me to update the "Getting Started". They said that they already have a "Fundamentals" course and that the "Getting Started" was unnecessary. They have then retired almost all of my courses. (I think there may be one remaining.) At this point in time, I don't expect to do any future courses on Pluralsight. My new content will be done here on TH-cam.

Do you plan on reworking "Getting started" on YT (or somewhere else) as a series of videos? Previously, your Pluralsight course was my first pick when I needed to recommend something to our interns when starting with Angular. It would be nice to have a go-to place again that could lead them into Angular world from scratch to advanced topics in a structured way.

@@mnemanja Thank you so very much for the kind words about my Pluralsight course. 😊 I originally thought I'd do a "getting started" on YT, but then found that there is no way to edit any published content. (You can cut out content, but not add/edit or replace any content.) So I would spend months to create a new "Getting Started" course and a few months later it would be out of date. I've heard that YT may be adding features to better support "courses", but I don't know what that would look like or how soon it would be available. I've looked for other places to potentially publish a course, but haven't found anything that meets my requirements: Easy for developers to find, easily update content, does not impose extra restrictions/requirements on the author (course length, face vs demos/illustrations, etc.) I have been trying to put my content here into playlists to have a basic order for watching all the content. But that doesn't really replace a well thought out course.

Yep! I really like the new control flow syntax!

Thank you for watching! 😊

Thank you! All the best in 2025! 😊

Thank you! 😊

Thank you! Glad it was helpful! 😊

That is very kind of you to say. Thanks so much! 😊

Thank you! 😊

Glad it was helpful. And yes, you want to clearly decide whether to provide a service in root or component. You rarely ever would want both. 😊

Hi! I'm planning on several other videos on rxResource to cover more scenarios. 😊 To answer your question, you could do something like this: // Get the posts postsResource = rxResource({ loader: () => this.http.get<Post[]>(this.postUrl).pipe( tap(() => console.log("Post Data Retrieved")) ) }) // Only after the posts, get the user for the first post userForPostResource = rxResource({ request: this.postsResource.value, loader: (posts) => this.http.get<User[]>(`${this.userUrl}/${posts.request?.[0].userId}`).pipe( tap(() => console.log("User Data Retrieved", posts.request?.[0].userId)) ) }) See the sample project here: stackblitz.com/~/edit/secondary-request-rxresource-deborahk

@ Hi Deborah! Thanks for the great explanation and code example. I have a follow-up question: Is there a way to trigger the request without relying on any signal? For example, let’s say the first request is fine and updates a field, but then I want to fetch the updated list again. What would be the best approach to achieve this? Thanks in advance for your insights! 😊

@@cristophersaraosverdugo5934 The resourceRef has a reload() method that re-executes the loader function if you want to re-fetch the current data. That's also on my list for a YT video. 😊

@ ❤️❤️❤️❤️❤️ Thank you very much!!!!

Thank you! 😊

I have not experimented with this, but my guess is: The shared instance would be created. But any component that provides the service would get its own instance of the service, not the shared instance. Any component (or other service) that injects the service and does not provide it would get the shared instance.

Yes, you are correct. I should have made a point to say that. Where this is important to signals is when using resource and rxResource. When using RxJS, the data is retrieved when something subscribes, so you can control better when the retrieval works. With resource and rxResource, if you don't have a request parameter, the loader function will execute when the service is initialized.

Thank you for watching! I'm often at Angular (like ngConf) and .NET conferences (such as VSLive).

Yes! That's correct. A service provided in a component is shared with its subcomponents. (But I think it would be confusing to call it a "singleton" in that case.)

Thank you! I normally use RxJS operators for sequential HTTP calls. I haven't gotten into the async / await patterns. Maybe that's something I should look into?

@@deborah_kurata its something I have been trying to experiment with because I want to try and remove RxJS as much as possible for making HTTP Requests so that new devs can jump in and use Fetch with Async / Await - or something like that that they might be more used to. I have hear rumblings about RxJS becoming optional in future release so my assumption is Angular will use Fetch but who knows lol. Once again thanks for your videos and replies.

🙏🏼😊

You're welcome! It's great to clear up misconceptions! 😊 Yes, you can have as many effects as you need. In my example, I could have made that one effect. But then it would log whenever either of the signals changed and it wouldn't be clear exactly when one changed vs the other.

@@deborah_kurata that's exactly the issues I was facing, but didn't know the solution until now. Ironically, I learned something on effect from a video on service scopes 😇

Thanks! 😃

Thanks so much! 😊

Yep. Do you use a lot of decorators?

@@deborah_kurata Yes. I use typestack/class-transformer a lot, which adds useful decorators to DTO files. It's useful for communicating with backend APIs, e.g. for String → Date conversion or even grouping fields depending on the CRUD operation being performed. A bit inspired by NestJS.

I'm not sure where you heard app.config.ts was deprecated. I just created a new Angular CLI project (v19) and it creates an app.config.ts file. 🤷🏼‍♀️ If you don't want to use an app.config.ts file, you just add your providers array directly into the bootstrapApplication() code. So instead of something like this in your app.config.ts file: export const appConfig: ApplicationConfig = { providers: [ provideZoneChangeDetection({ eventCoalescing: true }), provideHttpClient(), provideRouter(routes, withComponentInputBinding())] }; You'd have something like this (in main.ts): bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true }), provideHttpClient(), provideRouter(routes, withComponentInputBinding())] }).catch((err) => console.error(err)); Does that answer your question?

@@deborah_kurata Thank you for your reply. Probably it's removed from the project in the past by another member. I never noticed before. I will try your approuch. again thank you for your fast reply

Glad you found it helpful! 🎉 Thank you!

Thank you for watching! 😀

Thanks for watching! 😊

Yep! Immutability is a powerful concept across many languages! 😊

Thank you for watching the video! Http calls are not necessarily unavoidable. You can use fetch instead of HTTP Client to retrieve data using promises. Personally, I prefer HTTP Client (which as you said returns an observable). Using signals won't necessarily replace all Observables, especially when dealing with event-based actions. Things like tracking/reacting to keypresses, when you want every emitted value, you'll still want Observables. So yes, signals will replace many observables, especially those used to manage state. But we'll still want observables for event-based actions.

For simple applications, yes. For more complex applications and for large teams, probably no. And ngRx, and of course signalStore, are becoming more signal based.

In some cases, yes. Especially those cases where combineLatest was used to handle multiple query parameters. In other cases, there may still be use for combineLatest, such as when handling events from multiple sources (keypress and mouse move for example).

That is so very kind of you to say! I appreciate that! 😊

Thank you so very much! 😊 Thanks for watching!

Thanks!

Thank you so much! All the best in 2025! 😊

Great tooling for the win! LOL. Glad it was useful. 😊

I'm glad you found it helpful! 😊

Thank you! I'm really glad you enjoyed it! 😊

Thanks! Do you have a code snippet of your combineLatest so I have a clear idea of your objective? I used to use combineLatest to do something with a retained observable when another observable changes. If these are all signals instead, the linkedSignal() can often do the same job. It depends on your specific scenario.

@@deborah_kurata I meant that if I can use Resource or RxResource to handle multiple http request. It seems that it can only handle one request with loader function in Resource or RxResource. To handle multiple request, it seems that we still can not avoid to use combineLatest. I asked Grok AI. It gave me the answer. `import { inject, Injectable } from '@angular/core'; import { resource } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class MultiResourceService { private http = inject(HttpClient); combinedResource = resource({ loader: async () => { const [users, products] = await Promise.all([ this.http.get<User[]>('url1').toPromise(), this.http.get<Product[]>('url2').toPromise() ]); return { users, products }; } }); }` or another way `private http = inject(HttpClient); usersResource = rxResource({ loader: () => this.http.get<User[]>('url1') }); productsResource = rxResource({ loader: () => this.http.get<Product[]>('url2') }); combinedResource = combineLatest([this.usersResource.result$, this.productsResource.result$]).pipe( map(([users, products]) => ({ users, products })) ); combinedResource.subscribe(result => { console.log(result.users, result.products); });`

Or you could do something like this, which prevents the need for any subscriptions or async/await: combinedResource = rxResource({ loader: () => combineLatest([ this.http.get<Post[]>(this.postUrl), this.http.get<User[]>(this.userUrl) ]) }); posts = computed(() => this.combinedResource.value()?.[0] ?? [] as Post[]); users = computed(() => this.combinedResource.value()?.[1] ?? [] as User[]); To make it easier to work with the returned array of arrays, you could add array destructuring like this: combinedResource = rxResource({ loader: () => combineLatest([ this.http.get<Post[]>(this.postUrl), this.http.get<User[]>(this.userUrl) ]).pipe( map(([posts, users]) => ({ posts, users})) ) }); posts = computed(() => this.combinedResource.value()?.posts ?? []); users = computed(() => this.combinedResource.value()?.users ?? []); See the stackblitz here: stackblitz.com/~/edit/combinelatest-rxresource-deborahk

Yep! Signals are fun! Thanks