I think Observables are not so easy to understand, I have the same problem. The tutorials are always clear but when you need to solve a problem yourself you are like "lol how the hell do I do this now?"
It's so important to have a good teacher. I would have spent months trying to understand these concepts.. but this video has shortened the learning curve to few days.
Thank you sir! I used Angular for the last 2-3 years and I was afraid to keep learning the operators, but I've started this and in few days I feel like an expert. Thank you
This was incredibly useful! Concise and well narrated! Thank you! Also, a request.. could you do something like an rxjs design patterns/best practices series?
This was some god-level stuff, Amazing well explained, one request to viewers please read about maps for observables a little bit then it won't be confusing for you.
Thanks great tutorial. A little request: You are using switchMap together with debounceTime. But I miss the step where you configure the search binding and how you get the type-ahead working. Can you point out an example of that usage?
A thousand thank-yous for these clear explanations on these; I am a new Angular dev struggling with RXJS and this has cleared up so much in my understanding. Thanks again!
That options request sent during the post call is a pre-flight request made by browser to prevent cors attacks, This is only sent for calls like post, put delete.
Wow was this ever useful. Coming from old promises to writing now in angular 11 with RxJs and only understanding it enough to get myself into trouble was not good.
This feature is sometimes used in JavaScript to set the scope of a function to the current scope. In this example, I am passing a function to a directive, and so I want that function to use the scope of my component. Here is an example to better explain what I mean: Observe my component: export class HomeComponent {
name = 'david'; getName() { // 'This' refers to the scope of HomeComponent and everything inside of it. console.log(this.name); } } export class OtherComponent { @Input() externalFunction: Function; age = 20; getAge() { // 'This' refers to the scope of OtherComponent and everything inside of it. console.log(this.age); // This method calls "this.name". What do you think will happen? this.externalFunction(); // 'this.name' will fail because the current component, OtherComponent, does not have acess to the scope of // HomeComponent. What can we do to fix this? (Change the scope - see next class) } } export class HomeComponent { name = 'david'; constructor() { // When you pass a function to another component (using the @Input that I used above), you only pass that function // You do not pass the scope or any other data that is in that component. To pass the function and the scope, you can bind to 'this'. // That will bind the function to the current scope so that any external component that uses your function will have access to the // scope that you assigned it. this.getName = this.getName.bind(this); } getName() { console.log(this.name); } } export class OtherComponent { @Input() externalFunction: Function; age = 20; getAge() { this.externalFunction(); // Now, whenever 'this' is used INSIDE of the externalFunction, it will refer to the HomeComponent's scope. In other words, // now the function can acess the name variable or any other variables/data inside of the HomeComponent. Again, this is required // since we pased a function from the HomeComponent to the OtherComponent because we only passed that function. When passing a function // in this way, the OtherComponent cannot access everything else in HomeCoponent without binding first. } }
Little note for people like me, reading this comment one year later: Only the Observable.contact() function is deprecated. Not the standalone static operator :)
![Http Requests, Interceptors, Error Handling & more [Angular Series]](http://i.ytimg.com/vi/-G7kStvqgcg/mqdefault.jpg)
00:20 #10 - of/from
03:01 #9 - Map/Tap
05:48 #8 - Share
08:26 #7 - SwitchMap
11:24 #6 - Debounce Time
13:42 #5 - Distinct until changed
14:50 #4 - Take, TakeUntil, TakeWhile, TakeLast
19:56 #3 - MergeMap/FlatMap
22:12 #2 - Concat
23:43 #1 - ForkJoin
thanks!
You're a hero!
thanks a lot!!
Yea seriously thank you!! I wish creators would automatically do this or just state what they are going to go over in the beginning
thanks bro
GOAT explanation. You could call it RxJs Operatoes For Dummies. I finally understand switchMap thanks to u. 🙇♂️
I haven't seen any lecture on youtube simpler than this for observable and related operators. Thanks a lot.
Love from India. Thanks for a very good tutorial.
The best RxJs Operators (Angular) video.
Thanks
So much precise. Hats off for making rxjs/rxjs operators easy to understand👌
One of the greatest explanation for all time.Thanks a lot David!.you are saved my life.
Now this is a video I could watch a few times over and still learn things from. I don't know why front end coding styles are so confusing to me.
I think Observables are not so easy to understand, I have the same problem. The tutorials are always clear but when you need to solve a problem yourself you are like "lol how the hell do I do this now?"
It's so important to have a good teacher. I would have spent months trying to understand these concepts.. but this video has shortened the learning curve to few days.
Thank you sir! I used Angular for the last 2-3 years and I was afraid to keep learning the operators, but I've started this and in few days I feel like an expert. Thank you
Excellent! Thanks for the clear explanation of rxjs.
I'm new to rxjs. Thank you for finally demystifying rxjs operators for me. Much appreciated
Amazing example, very easy to understand thank u soooo much
This was incredibly useful! Concise and well narrated! Thank you! Also, a request.. could you do something like an rxjs design patterns/best practices series?
1.ForkJoin - 23:44
2.Concat - 22:14
3.MergeMap/FlatMap - 19:57
4.Take/TakeUntil/TakeWhile/TakeLast - 14:52
5.DistinctUntilChanged- 13:44
6.DebounceTime -
7.SwitchMap - 08:26
8.Share - 05:50
9.Map/Tap - 03:01
10.Of - 0:20
This was some god-level stuff, Amazing well explained, one request to viewers please read about maps for observables a little bit then it won't be confusing for you.
good video, no need to double pipe, one pipe can rule them all
Simple and crystal clear. Thanks for the awesome tutorial
Thanks great tutorial. A little request: You are using switchMap together with debounceTime. But I miss the step where you configure the search binding and how you get the type-ahead working. Can you point out an example of that usage?
very clear voice and easy to understand.thanks for the video.
A thousand thank-yous for these clear explanations on these; I am a new Angular dev struggling with RXJS and this has cleared up so much in my understanding. Thanks again!
This video is so clear I can use it as a mirror.
That options request sent during the post call is a pre-flight request made by browser to prevent cors attacks, This is only sent for calls like post, put delete.
One of the best RxJs tutorials. How is stop() being called at 19:11? I didn't see a reference to it, but perhaps I missed it
Same here
Lucky to find the channel....
Wow was this ever useful. Coming from old promises to writing now in angular 11 with RxJs and only understanding it enough to get myself into trouble was not good.
Very useful video 👍 well done
Great tutorial, is it possible to share these codes via github?
Hi David Acosta , Thank you so much for wonderful Angular series. Could you please add more VDO which will be very useful.
Thanks! I like your explanation is clear and concise, hitting all important points.
Thanks a lot for this tutorial..I loved how you explained.
Great
Could you please make a video on browser side Image/resource caching using angular?
How do we perfrom mergeMap on two Observable arrays.. ??
~700 likes and 9 dislikes dont know who can dislike such an awesome tutorial!!
Does the share operator also unsubs both the observable?
This is a really good video. Thanks boss
Nice and clear with examples, thank you!
Thanks David. Great tutorial. Cheers.
This is very useful. And very well explained with good examples. @David waiting for more such videos.
Precise and clear 👍👍👍👍
This. Was. So. Freaking. Helpful. Thank you!!!
Awesome explanation ❤️❤️
Always a pleasure to learn from you. Thanks.
best tutorial for operators thanks and .subscribed() :D !
Very clean and understandable, thanks lot
What is the difference between switchMap and mergeMap ?
Damn, you are a great teacher!
Amazing video!!!! Thank you so much
13:15 where did that text$ observable come from?
text$ means... $ indicates its a Observable content.
Hey David, when will you coming back for the next awesome angular tutorial ? miss you so bad
HELP why am I having this error creating the Person object type Person = /*unresolved*/ any
Beautiful explanation!!
such a beautiful explanation
I wish I learned Rxjs earlier, it would'v saved me so much hassle.
Great explanation.
Thanks for the great video 👍, very helpful
text$.pipe() not working in JS6.
Thanks. Very useful video.
Thanks! Really useful video!
Thanks, this was helpful.
Thank you very much for share, it’s help
Great video. What theme, font and vs code configuration are you using?
Awesome, can you share the code ? github ?
11:48 "Binded" :p Commonly referred to as "bound"
How are you able to assign. I have assign same things but showing error.
const source = of('Randhir');
source.subscribe(data => console.log(data));
const source should be of type observable and you are converting string to observable using of operator .
Thanks. Nice video
Really great!
Awesome . Thank you.
Really nice, thank you
Thanks for a great brief!!
Cool, great introduction! Thank you
Thank you! But always use “$” suffics instead “Obs”, please!
Y
@@vinothdevaraj7267 its a convention bro
You're awesome David, subscribed!
Can anyone explain this.search = this.search.bind(this)? What it is its purpose and why do we need it?
This feature is sometimes used in JavaScript to set the scope of a function to the current scope. In this example, I am passing a function to a directive, and so I want that function to use the scope of my component. Here is an example to better explain what I mean:
Observe my component:
export class HomeComponent {
name = 'david';
getName() {
// 'This' refers to the scope of HomeComponent and everything inside of it.
console.log(this.name);
}
}
export class OtherComponent {
@Input() externalFunction: Function;
age = 20;
getAge() {
// 'This' refers to the scope of OtherComponent and everything inside of it.
console.log(this.age);
// This method calls "this.name". What do you think will happen?
this.externalFunction();
// 'this.name' will fail because the current component, OtherComponent, does not have acess to the scope of
// HomeComponent. What can we do to fix this? (Change the scope - see next class)
}
}
export class HomeComponent {
name = 'david';
constructor() {
// When you pass a function to another component (using the @Input that I used above), you only pass that function
// You do not pass the scope or any other data that is in that component. To pass the function and the scope, you can bind to 'this'.
// That will bind the function to the current scope so that any external component that uses your function will have access to the
// scope that you assigned it.
this.getName = this.getName.bind(this);
}
getName() {
console.log(this.name);
}
}
export class OtherComponent {
@Input() externalFunction: Function;
age = 20;
getAge() {
this.externalFunction();
// Now, whenever 'this' is used INSIDE of the externalFunction, it will refer to the HomeComponent's scope. In other words,
// now the function can acess the name variable or any other variables/data inside of the HomeComponent. Again, this is required
// since we pased a function from the HomeComponent to the OtherComponent because we only passed that function. When passing a function
// in this way, the OtherComponent cannot access everything else in HomeCoponent without binding first.
}
}
@@davidacosta4611 Thank you, really awesome explanation!!!
Xlent tutorial big thanks for this job
Shall i get source code for switch map?
I would appreciate if its possible
Can I have that code?
Please continue posting videos
Hey Man Huge Thanks.
switchmap is depreceated :(
can you please do some NgRx tutorials please
Sir plz more vedios.....
Thanks alot
Awesome
Awesome...
Good stuff! 🐱💻
awesome!!!
Awesome!!
thank you
Awesome Content! Tnks. I'm watching now and 'concat' is deprecated.
Little note for people like me, reading this comment one year later: Only the Observable.contact() function is deprecated. Not the standalone static operator :)
Nice!
Thanks a lot ...
great! thank u ;)
dam it, the mic is so good
keep on ya are just great muslim
share email. I have business inquiry
this is very great video. Thanks for doing it.
Sir plz more vedio...