Top 10 RxJs Operators in Angular [Angular Series]

Check out my latest course, Isomorphic JavaScript with MEVN (MongoDB, ExpressJS, VueJS, NodeJS) Stack at
www.packtpub.com/web-developm...
In this video, I demonstrate how to use 10 RxJs Operators, and how to implement them into the Angular 2 Framework.

[@romeromedeiros3287]

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

[@frakk2]

thanks!

[@yussefbens]

You're a hero!

[@mitsen01]

thanks a lot!!

[@CarloNyte]

Yea seriously thank you!! I wish creators would automatically do this or just state what they are going to go over in the beginning

[@g-luu]

thanks bro

[@KungFuBrothaz]

GOAT explanation. You could call it RxJs Operatoes For Dummies. I finally understand switchMap thanks to u. 🙇‍♂️

[@gregorriusadolphus2729]

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!

[@VinothKumar5403]

One of the greatest explanation for all time.Thanks a lot David!.you are saved my life.

[@ramsp35]

I haven't seen any lecture on youtube simpler than this for observable and related operators. Thanks a lot.

[@nateshaffer258]

I'm new to rxjs. Thank you for finally demystifying rxjs operators for me. Much appreciated

[@PitJunFan]

The best RxJs Operators (Angular) video.
Thanks

[@marktwain9995]

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.

[@sorinvestemean9686]

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

[@bmunnabe]

Simple and crystal clear. Thanks for the awesome tutorial

[@SomjitNag]

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?

[@loficasa8225]

Always a pleasure to learn from you. Thanks.

[@TechPoint56]

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.

[@MyMitanshu]

So much precise. Hats off for making rxjs/rxjs operators easy to understand👌

[@mitsen01]

very clear voice and easy to understand.thanks for the video.

[@richnimbu]

Excellent! Thanks for the clear explanation of rxjs.

[@sbabu2642]

Very clean and understandable, thanks lot

[@evyguo7577]

Thanks! I like your explanation is clear and concise, hitting all important points.

[@zhiyue_yi]

Cool, great introduction! Thank you

[@raysunqi]

Nice and clear with examples, thank you!

[@VIVEKJOSHI05]

Love from India. Thanks for a very good tutorial.

[@proboyX42]

Precise and clear 👍👍👍👍

[@engganeshwani]

Beautiful explanation!!

[@thatsenam9183]

such a beautiful explanation

[@jordanneedscoffee]

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.

[@CorDharel]

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?"

[@dilankag]

Thanks David. Great tutorial. Cheers.

[@AnuragSingh-ev8qd]

Thanks a lot for this tutorial..I loved how you explained.

[@KalpeshPanchal]

You're awesome David, subscribed!

[@tomergueta9125]

Thanks for a great brief!!

[@binhhoang2112]

Amazing example, very easy to understand thank u soooo much

[@alexanderkoval1481]

This. Was. So. Freaking. Helpful. Thank you!!!

[@gauripatil9271]

This is very useful. And very well explained with good examples. @David waiting for more such videos.

[@zzghg8019]

~700 likes and 9 dislikes dont know who can dislike such an awesome tutorial!!

[@sketchcreativeminddevloper6874]

Xlent tutorial big thanks for this job

[@debayansaha820]

Awesome explanation ❤️❤️

[@swapnilshingade8710]

Great explanation.

[@kumarKumar-qs8sy]

this is very great video. Thanks for doing it.

[@mikaeledebro1144]

Thanks! Really useful video!

[@boathecat919]

This video is so clear I can use it as a mirror.

[@Kartikmishraacts]

Really great!

[@osamamalik3290]

This is a really good video. Thanks boss

[@shanksakagami1325]

Thanks. Very useful video.

[@priyankabarde6503]

Hi David Acosta , Thank you so much for wonderful Angular series. Could you please add more VDO which will be very useful.

[@vishwanathgowda3307]

Awesome . Thank you.

[@lakhveerchahal]

Very useful video 👍 well done

[@waseemahmadnaeem9504]

Thanks, this was helpful.

[@_oo.monkeypox.oo_3344]

Hey Man Huge Thanks.

[@sn66410]

Lucky to find the channel....

[@amerhero1721]

Really nice, thank you

[@rjrjrjj4461]

Thank you very much for share, it’s help

[@ramya23041987]

Thanks. Nice video

[@ronjonk9775]

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?

[@rodolfonogueira7254]

Awesome!!

[@OwNeDGr]

best tutorial for operators thanks and .subscribed() :D !

[@mahmoud-kassem]

Thanks for the great video 👍, very helpful

[@mahmoud-kassem]

text$.pipe() not working in JS6.

[@scorpionbeardo]

Damn, you are a great teacher!

[@idlevandal69]

Awesome...

[@rcremer]

good video, no need to double pipe, one pipe can rule them all

[@robindrasingha5408]

Thanks a lot ...

[@shivamrox1]

awesome!!!

[@Danielkaas94]

Good stuff! 🐱‍💻

[@LieberLois]

Amazing video!!!! Thank you so much

[@cuongquoc8443]

great! thank u ;)

[@adewaleadisa4346]

Thanks alot

[@alcidesaugusto7589]

Nice!

[@amitkumdixit]

Awesome

[@lemmusm]

Great video. What theme, font and vs code configuration are you using?

[@nawazsharif7177]

thank you

[@abhilashgundlapally]

Please continue posting videos

[@aussieraver7182]

I wish I learned Rxjs earlier, it would'v saved me so much hassle.

[@MusicMonkey5555]

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.

[@69bitboy]

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

[@hero3616]

Same here

[@chinmaypadole9080]

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.

[@shayanpaul3430]

Great tutorial, is it possible to share these codes via github?

[@LikeTotallyDouchey]

Does the share operator also unsubs both the observable?

[@dfytq]

Great
Could you please make a video on browser side Image/resource caching using angular?

[@radvilardian740]

Hey David, when will you coming back for the next awesome angular tutorial ? miss you so bad

[@jasminmalviya4034]

Shall i get source code for switch map?
I would appreciate if its possible

[@VIjayKumartheh2o]

How do we perfrom mergeMap on two Observable arrays.. ??

[@tranquillityEnthusiast]

Sir plz more vedios.....

[@tranquillityEnthusiast]

Sir plz more vedio...

[@gabrielluca8392]

What is the difference between switchMap and mergeMap ?

[@jeffpeng1118]

13:15 where did that text$ observable come from?

[@kran399]

text$ means... $ indicates its a Observable content.

[@sanjibanichoudhury7517]

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

[@yassinemsiah2288]

can you please do some NgRx tutorials please

[@kprabhanew]

Awesome, can you share the code ? github ?

[@Siddiskongen]

11:48 "Binded" :p Commonly referred to as "bound"

[@Flipkurama]

Awesome Content! Tnks. I'm watching now and 'concat' is deprecated.

[@schnasndasn1504]

Little note for people like me, reading this comment one year later: Only the Observable.contact() function is deprecated. Not the standalone static operator :)

[@randhirkumar3705]

How are you able to assign. I have assign same things but showing error.
const source = of('Randhir');
source.subscribe(data => console.log(data));

[@vigneshwar8]

const source should be of type observable and you are converting string to observable using of operator .

[@jotasenator]

HELP why am I having this error creating the Person object type Person = /*unresolved*/ any

[@Qellson]

Can anyone explain this.search = this.search.bind(this)? What it is its purpose and why do we need it?

[@davidacosta4611]

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.
}
}

[@Qellson]

@@davidacosta4611 Thank you, really awesome explanation!!!

[@eriic504]

Can I have that code?

[@MrKsuhiyp]

dam it, the mic is so good

[@dilettante-me]

Thank you! But always use “$” suffics instead “Obs”, please!

[@vinothdevaraj7267]

Y

[@Fascinatingtapes]

@@vinothdevaraj7267 its a convention bro

[@bobby_tablez]

@@Fascinatingtapes Lots of people like to assume this is an agreed-upon convention. This practice has only been borrowed from a convention of Cycle.js. It is only ever briefly mentioned in the Angular docs, where it says you may notice this practice that some developers use to denote an observable, it also mentions that since we use Typescript, it's usually obvious what an observable is just by the type. Nowhere in the RxJS docs do you see this practice used. It's not an official convention. Now it may actually be useful in regular JavaScript where you don't have types, but generally I think it's ugly to add character prefixes/suffixes to variable names to add some sort of type context when we already have Typescript doing that for us

[@ssenkumbadeogratius6910]

switchmap is depreceated :(

[@mohamedhassan-ub4kj]

keep on ya are just great muslim

[@scarlettbrown893]

share email. I have business inquiry