😊

Yeah, I thought about trying to explain why in the video, but it got long so I didn't keep it in. It's about the future. As more and more features of Angular support signals, the current plan is that the let syntax will generate a computed signal in the background. The plan for the 'as' clause doesn't include that. So at some point in the future, signals simplified with the 'as' clause may not re-render when the signal changes. For example, the current plan is that this code: @let snack = selectedSnack(); @if (snack) { {{ snack.numberInStock}} ... } Will always correctly re-render if the selectedSnack() changes. Code like this: @if (selectedSnack(); as snack) { {{ snack.numberInStock}} ... } May not re-render if the selectedSnack() changes. NOTE: The above currently works without issue. But may not in signal-based components. ALSO: This is the current *plan* and that plan may change. But this is what the Angular team is currently telling us.

Great! Thanks!

Yes! It seems like something very useful that can easily be misused.

Thank you so much 😀 Great to hear that they are useful!

Thank you! And thanks for the suggestion. I'll add it to the list!

Thank you!

Thank you! 😊

Yeah, that works great. (I showed an example of that at the end of the video.) I've been moving much of my code to expose state in my services as signals and keep the observables private. So let helps me with the signal type narrowing.

It's about the future. As more and more features of Angular support signals, the current plan is that the let syntax will generate a computed signal in the background. The plan for the 'as' clause doesn't include that. So at some point in the future, signals simplified with the 'as' clause may not re-render when the signal changes. For example, the current plan is that this code: @let snack = selectedSnack(); @if (snack) { {{ snack.numberInStock}} ... } Will always correctly re-render if the selectedSnack() changes. Code like this: @if (selectedSnack(); as snack) { {{ snack.numberInStock}} ... } May not re-render if the selectedSnack() changes. NOTE: The above currently works without issue. But may not once we have signal-based components. ALSO: This is the current *plan* and that plan may change. But this is what the Angular team is currently telling us.

​@@deborah_kurataI don't think that happens, because of breaking backwards compatibility

@@tiberseptim7183I'm sharing what the Angular team is telling the Angular GDEs at this point. Those plans can change, however. Just like how OnPush change detection works differently, it seems that when they do zoneless signal-based components, they don't necessarily have to be backwards compatible with how change detection works now. As long as the "normal" components are backwards compatible.

Yes! I wasn't sure about it when I first heard of it ... but now that I'm using it I'm finding it to be very useful.

Thanks! Yep! I really liked *ngrxLet when using NgRx. I was glad to see this added.

What I great metaphor! I hadn't thought about that. LOL. Thank you!

Excellent! Thank you! 😊

Thanks! No, destructuring is not possible, at least at this point.

Yeah, it's new in Angular version 18.1, which just came out yesterday. 😊

@@deborah_kurata love it!

😊

Thank you so much for watching!

😊

Hope the posts are helpful. Thank you!

That is so very kind of you to say. Thank you!

Thanks! Yep! I was just waiting to record it until after 18.1 came out this morning. The video should be out tomorrow (Thursday) morning PDT. 😊

Thank you. SSR is something I haven't needed to do. So I don't know the answer to your question.

Best example for hot observable is behavioural subjects, correct?

Glad it was helpful! 😊

Yes. Correct.

Thank you! Yeah, I've been considering doing a beginner level Angular course. But it's difficult to find the time with so much new content to post about! 😊

Great to hear that. Thank you!

Thank you so very much! My family is very excited to be heading to Turkiye this fall. Any tips?

Kind of you to say. Thank you! 😊

Thank you! 😊 I have about 20 courses on Pluralsight. I tried to sign up to post a few courses on Udemy, but was never able to get past the "validate yourself" step. And I was unable to ever find an actual Udemy person to help me. 😐

Excellent! Thank you so much for the kind words!

Thank you so much!

Wow, thank you! 😊

Thank you! 😊

Glad it was helpful! Thank you! 😊

Thank you so much! Yes. Whenever you see this type of syntax: selectedVehicle$ = this.vehicleService.selectedVehicle$.pipe(...) If an async pipe subscribes to the observable on the left, it automatically subscribes to the observable on the right. That includes unsubscribe as well. Same for code like this: vm$ = combineLatest([this.vehicles$, this.selectedVehicle$, this.vehicleClasses$]).pipe( map(([vehicles, selectedVehicle, vehicleClasses]) => ({ vehicles, selectedVehicle, vehicleClasses })) ); Subscribing to vm$ with an async pipe automatically subscribes/unsubscribes to all of the referenced observables: vehicles$, selectedVehicle$, and vehicleClasses$. You can try this out using my github repo here: github.com/DeborahK/Angular-ReactiveDevelopment (In this repo, I use vehicles and vehicle classifications instead of products and product categories, but the basic concepts are the same.)

​@@deborah_kurata I really appreciate you answering even older videos, that's uncommon. Thank you very much for the detailed explanation, it seemed logical to me that it'd work in similar way, but I couldn't find answer in the docs and I don't like to rely on intuition when it comes to my code.

Yes! The aliasing is optional. I've always done that out of habit, but the let is not required. You can use the variables directly in the template.

Not sure what you are referring to here? The code shown is in a service, which is a .ts file. If you are looking for a pattern based on signals, try this one instead: kzbin.info/www/bejne/qHm0kmeJpcqel6M

@@deborah_kurata i mean there is no nicer shorter way to subscribe to the observable in typescript file

There are several ways to subscribe to an Observable: - async pipe: define the observable in the service, reference the observable in the component, bind using the async pipe. - toSignal() method: define the observable in the service and call toSignal, passing in that observable. - manual subscription: call `subscribe()` on the observable.

Thank you so much! 😊 You can find my Angular playlists here: kzbin.info/aero/PLErOmyzRKOCrzJ9zUEGgC1zVzVGt3hMmV And here: kzbin.info/aero/PLErOmyzRKOCr07Kcnx75Aqh6PWSbIokPB

Thanks! Great idea!

It is recommended that business logic go in a service. This sample application was focused on the @for block, so I didn't take the time to move all of the signals from the component to the service, if that's what you are referring to. And definitely things like displaying the row number and odd/even highlighting would be UI and not really business logic, right?

Yep! 😊

Glad it was helpful!

Great to hear! 😊

You can just pass the function name. That's easier/shorter. But if you did want to call it manually, you'd have to pass both arguments: trackSnack($index, snackItem)

Thanks! 😊

Thanks to you! 😊

Glad to hear that. Thank you!

Glad that it was useful! Thanks!

Yep! Thanks!