@@deborah_kurata Portugal is very small so in 3 days you can get the best of the North (OPorto, Aveiro (my city), Lisbon (capital) and even the south beaches (Algarve) :) all by train (Alfa Pendular). I'm a little out of the path of local meetups in last years.
I've been working with rxjs for a long time and thoroughly enjoy watching your videos on the topic! You definitely want to subscribe to Deborah! (pun intended)
Thanks for the great tutorial Deborah! One question how to have a loading: true/false indicator during Ajax call? when to set loading true & false while using async pipe?
Excellent question! I've already got content queued up for the next few days, but I'll put together a video of this later this week. Short answer, you can define the flag as a BehaviorSubject and emit when the value needs to change. Then react to that change notification.
Hello Deborah, thank you for sharing the tips. However, I still would have a question about being declarative. You've shown how to declare only the read operation, but what about the mutations (create, update, delete)? I mean, in your example, the Users service, you have only onSelected(user) public method returning void, which does make sense. How would you define create/update/delete methods to complete CRUD? I'm a little bit afraid that in this case I still would need to return Observable, right? If we take as an example the Create user (after creating a user, set him/her as a selected user), would have you something like this? public create(user: UserModel): Observable { return this._http.create(user).pipe( do(resp => this.onSelected(resp.id)), // load created user map(() => undefined), // throw away the server response to match the observable type cacheError(this.handleError), ); } Let's not consider caching at this moment, to keep it simple.
Great question! I'm on vacation until Wednesday and will get back to you then. In the meantime, I have an example here: github.com/DeborahK/Angular-RxJS
Did the example I provided help? From the APM-WithExtras in the product-edit.service.ts: ```TypeScript // Save the product via http // And then create and buffer a new array of products with scan. productsWithCRUD$ = merge( this.productsWithCategory$, this.productModifiedAction$ .pipe( concatMap(operation => this.saveProduct(operation)) )) .pipe( scan((acc, value) => (value instanceof Array) ? [...value] : this.modifyProducts(acc, value), [] as Product[]), shareReplay(1) ); ``` I'm currently finishing my JavaScript course here on YT. As soon as that is finished I'll add more content on using a reactive approach to CRUD.
@@deborah_kurata if i may suggest and if ur time permits angular videos illustrated in what could be described as bare metal explanation or in other words how thar complex concept is compiled in browser
When programming declaritively with RxJS, I often feel like I'm doing something wrong... for example, in a component, if I'm doing something like this: myObs$ = this.myService.getMyObs(); Obviously I can bind myObs$ to the template with the async pipe, but what if I also need that data in some logic in my component (like in some method/function). So with that code, I'd add a pipe, and tap, and in the tap assign the data to a local variable which I can then use in the template function. That pattern seems like way more work than just doing the same thing in a subscribe. So my question is.... am I doing this right? Or is there a much better way that I'm missing?
It depends on what you are doing ... but you may be able to accomplish the same thing using the myObs$ observable. For example, this code finds the selectedProduct in the products$ observable without needing to use a separate variable to store the data: selectedProduct$ = combineLatest([ this.products$, this.productSelectedAction$ ]).pipe( map(([products, selectedProductId]) => products.find(product => product.id === selectedProductId) ) ); But how we work with RxJS may change a bit soon with the new Angular v16 signals. We may want to get the emitted values and put them into a signal we can work with instead.
Thank you Deborah.
Your explanations are Crystal clear.
From now I will go declarative
Excellent! All the best!
Hands down, whenever I need RxJs information Deborah is ALWAYS the person I come to. Clearest explanations 100% of the time!
Wow, thank you! That's great to hear! 🙏🏼
You have solved some issues for me that I had been trying to figure out for a long time. Thank you so much.
Great to hear! Glad it was useful!
Many thanks and love you ma'am. Your teaching style is very unique and one can learn programming very easily without any tension.
That is great to hear. Thank you!
You're an amazing teacher, Deborah. Thanks a lot! Thinking reactive is not so trivial haha. Your content is helping me so much :)
Wow! Thank you so much for the kind words! 😊
Best RxJS videos ever!
Thank you so much!
Thank you again Deboarah, you are one of my references in my new Angular/RxJS life, learning more and more with you, always. Cheers from Portugal
Thank you!
We'd love to come to visit Portugal! Do you have any suggestions for places to go? Local meetups we could attend while we are there?
@@deborah_kurata Portugal is very small so in 3 days you can get the best of the North (OPorto, Aveiro (my city), Lisbon (capital) and even the south beaches (Algarve) :) all by train (Alfa Pendular).
I'm a little out of the path of local meetups in last years.
@@MarcoPinheiro Thanks for the info!
Salema in Algarve is definitely a place worth visiting! Stunning! But then again, the whole of Portugal is
Thank you ma'am ! Great tutorial ! this is just awesome, you are awesome Deborah ! ManytThanks for putting such effort and love on yours videos
Glad it was helpful! Thank you so much!
I've been working with rxjs for a long time and thoroughly enjoy watching your videos on the topic! You definitely want to subscribe to Deborah! (pun intended)
Just ignore it when the video says to unsubscribe! LOL! Thank you for posting!
Thank you Deboarah Kurata!
Thanks for watching!
Thanks for the great tutorial Deborah! One question how to have a loading: true/false indicator during Ajax call? when to set loading true & false while using async pipe?
Excellent question! I've already got content queued up for the next few days, but I'll put together a video of this later this week.
Short answer, you can define the flag as a BehaviorSubject and emit when the value needs to change. Then react to that change notification.
Hello Deborah, thank you for sharing the tips. However, I still would have a question about being declarative. You've shown how to declare only the read operation, but what about the mutations (create, update, delete)?
I mean, in your example, the Users service, you have only onSelected(user) public method returning void, which does make sense. How would you define create/update/delete methods to complete CRUD? I'm a little bit afraid that in this case I still would need to return Observable, right? If we take as an example the Create user (after creating a user, set him/her as a selected user), would have you something like this?
public create(user: UserModel): Observable {
return this._http.create(user).pipe(
do(resp => this.onSelected(resp.id)), // load created user
map(() => undefined), // throw away the server response to match the observable type
cacheError(this.handleError),
);
}
Let's not consider caching at this moment, to keep it simple.
Great question! I'm on vacation until Wednesday and will get back to you then.
In the meantime, I have an example here: github.com/DeborahK/Angular-RxJS
Did the example I provided help?
From the APM-WithExtras in the product-edit.service.ts:
```TypeScript
// Save the product via http
// And then create and buffer a new array of products with scan.
productsWithCRUD$ = merge(
this.productsWithCategory$,
this.productModifiedAction$
.pipe(
concatMap(operation => this.saveProduct(operation))
))
.pipe(
scan((acc, value) =>
(value instanceof Array) ? [...value] : this.modifyProducts(acc, value), [] as Product[]),
shareReplay(1)
);
```
I'm currently finishing my JavaScript course here on YT. As soon as that is finished I'll add more content on using a reactive approach to CRUD.
Value of ur rxjs vids is marginal. Thanx alot
What could make them better?
@@deborah_kurata if i may suggest and if ur time permits angular videos illustrated in what could be described as bare metal explanation or in other words how thar complex concept is compiled in browser
Hi Deborah, is there a github repository to try out your teachings?
My github is here: github.com/deborahk
When programming declaritively with RxJS, I often feel like I'm doing something wrong... for example, in a component, if I'm doing something like this:
myObs$ = this.myService.getMyObs();
Obviously I can bind myObs$ to the template with the async pipe, but what if I also need that data in some logic in my component (like in some method/function). So with that code, I'd add a pipe, and tap, and in the tap assign the data to a local variable which I can then use in the template function.
That pattern seems like way more work than just doing the same thing in a subscribe. So my question is.... am I doing this right? Or is there a much better way that I'm missing?
It depends on what you are doing ... but you may be able to accomplish the same thing using the myObs$ observable.
For example, this code finds the selectedProduct in the products$ observable without needing to use a separate variable to store the data:
selectedProduct$ = combineLatest([
this.products$,
this.productSelectedAction$
]).pipe(
map(([products, selectedProductId]) =>
products.find(product => product.id === selectedProductId)
)
);
But how we work with RxJS may change a bit soon with the new Angular v16 signals. We may want to get the emitted values and put them into a signal we can work with instead.