Тёмный

switchMap() | RxJS TUTORIAL 

Подписаться
Просмотров 160 тыс.
% 2 858

Awesome RxJS Operators - this time: switchMap(). What is it and how may we use it?
Code (Start): jsfiddle.net/1w6k5sdj/
Code (End): jsfiddle.net/ys7Lruns/
Want to become a frontend developer? Consider diving into some of my courses:
Angular vs React vs Vue - Quickstart and Comparison: acad.link/ng-vs-react-vs-vue
Ionic + Angular - The Practical Guide: acad.link/ionic
Angular - The Complete Guide: acad.link/angular
Vue.js - The Complete Guide: acad.link/angular
You can follow me on Twitter (@maxedapps), Facebook ( academindchannel/) or visit our Website (www.academind.com).
See you in the videos!

Опубликовано:

 

1 июн 2017

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 131   
@karensarmiento6846
@karensarmiento6846 3 года назад
Amazingly explained! The documentation is incredibly confusing on this but you cleared up all of my confusion right away.
@nergrohombre
@nergrohombre Год назад
I agree, I think we need a real life example with a type ahead or something, but this is WAY better than the documentation
@anishspillai2225
@anishspillai2225 7 лет назад
I broke my head whole day to understand Switch map..google also did not help me ..most of the explanations were literally confusing..luckily I got to watch ur video..Thanks a lot for ur excellent explanation..
@academind
@academind 7 лет назад
It makes me really happy to read, that my explanations helped you Anish. Thank you for sharing this :)
@arpanbanerjee8584
@arpanbanerjee8584 4 года назад
Thank you Max for making these videos on Rxjs, there is a dearth of clear cut info availability on the internet. I am here after your angular course on Udemy ! I learned a lot from it. Thanks again!
@sponefromrainbow4869
@sponefromrainbow4869 5 лет назад
switchMap() is very complicated to understand but with your explanation, you make stuff easy, thank you so much.
@harsimerkaur4792
@harsimerkaur4792 6 лет назад
I have just finished watching 8 out of 11 wonderful videos on observables you have made. Could not find such explaination anywhere on internet. You have made this subject easier. Thanks @Academind! Keep up the Great work!
@academind
@academind 6 лет назад
Thank you so much for your sharing this absolutely fantastic feedback Harsimer! This really means a lot to me :)
@harsimerkaur4792
@harsimerkaur4792 6 лет назад
Academind sir, It is an honour for me to receive a reply from an expert like u. Thanks again! Made my day. :)
@alexwilson3380
@alexwilson3380 6 лет назад
A lot of the rxjs stuff hurts my brain. This video is really helpful and is possibly the only clear explanation I have found. Keep doing what you're doing.
@academind
@academind 6 лет назад
Really fantastic to read that my video helped to make things a bit clearer for you Alex, I'll try my best to keep it up!
@davidtheprogrammer
@davidtheprogrammer 7 лет назад
This is the first explanation of switchMap i've actually understood. Thank you!!
@academind
@academind 7 лет назад
Thanks so much Muma, makes me really happy to read that the video helped you!
@virendrapatel775
@virendrapatel775 4 года назад
👍👍
@gregorsondermeier9929
@gregorsondermeier9929 5 лет назад
I was looking to find an explanation to finally understand the difference between mergeMap() and switchMap(). I think now I do. Thanks!
@academind
@academind 5 лет назад
Great to read that the video was helpful for you Gregor, thanks a lot!
@salmi_azrinparentsonly863
@salmi_azrinparentsonly863 2 года назад
I have fallen in love with your french accent. French people are good teachers!!
@Ratchet2022
@Ratchet2022 8 месяцев назад
He’s German.
@nergrohombre
@nergrohombre 2 года назад
Thank you for getting to the point quickly and not wasting our time, EXCELLENT!!!!!!!!
@kamalkamals
@kamalkamals 6 лет назад
This course of rxjs is very important to approach with ngrx, thank you Maximilian and keep up.
@academind
@academind 6 лет назад
Thank you very much for your comment Kamal, it makes me really happy to read that you liked the video!
@kamalkamals
@kamalkamals 6 лет назад
with pleasure.
@AGUNGKAYA
@AGUNGKAYA 2 года назад
I like Max explain it straighforward and easy to understand
@88spaces
@88spaces 3 года назад
You have great videos about rxjs that are easy to understand and make the life of a developer easier.
@eveanthonyu.rondina2546
@eveanthonyu.rondina2546 2 года назад
Thank you. It solves my problem in nested observable on angular auth guard
@feliksgoldin5781
@feliksgoldin5781 6 лет назад
I have been searching for a switchMap() explanation for awhile now and thanks to you I finally understand this operator. Thank you so much!
@icavir
@icavir 2 года назад
Thanks for the explanation. Minimal and simple, just what you need to understand switchMap.
@dixitkhanal8885
@dixitkhanal8885 4 года назад
I was in trouble with this operator. Thanks a lot man. It cam in handy at the moment. I am subscribing you right away.
@98milok
@98milok 5 лет назад
I LOVE YOY GUY! Last night, i no understand nothing about that, but now, i understand very good the switchMap operator. Thanks man!
@lowzhao
@lowzhao 4 года назад
Very clear video thank you. I know its not HD, but the content is HD.
@prateekbhardwaj9943
@prateekbhardwaj9943 4 года назад
can i apply switchMap to my wife's repeated arguments
@unclesame
@unclesame 4 года назад
Lol, you will have to unsubscribe from the arguments. unsubscribe()
@fredgarati
@fredgarati 4 года назад
hahaha 'import { switchMap } from 'rxjs/operators' first
@tranhuuthu991990
@tranhuuthu991990 4 года назад
It’s your fault. If you did not subscribe to her voice, you would never hear it.
@RostY
@RostY 2 года назад
in version 8.x of RxJS they will add switchWife operator.
@user-gb6gw9hj3s
@user-gb6gw9hj3s 2 года назад
Assume you had one
@timothygrashaw5233
@timothygrashaw5233 2 года назад
You're a godsend Max. Thanks!
@forgotten225522
@forgotten225522 2 года назад
Incredibly clear explanation. Thank you!
@v1234able
@v1234able 6 лет назад
Ghost of Rxjs is no more . thq
@unity3dconcepts434
@unity3dconcepts434 8 месяцев назад
No matter what I watch what i read, unless I watch your videos i don't get the concept completely. hahahaha... thanks bro.
@samybaxy
@samybaxy 5 лет назад
Great tutorial - Finally switchMap makes sense to me :)
@verryondrums
@verryondrums 5 лет назад
Thanks for your videos! They are so helpful! I'm developing for such a long time and really got stuck with all those RxJS stuff... your explanations helped a lot!
@academind
@academind 5 лет назад
Awesome to read that Verry, thank you very much!
@DonTaldo
@DonTaldo 3 года назад
Excellent explanation!
@alshojamikbal8510
@alshojamikbal8510 5 лет назад
Finally got what switchmap is OMG :O and can you please explain it with Angular 6 +
@bharathmkulkarni9411
@bharathmkulkarni9411 2 месяца назад
Very well explained!
@leolanese
@leolanese 7 лет назад
Simpler explanation ever! Well done
@academind
@academind 7 лет назад
Thanks so much for your comment Leo, happy to read that you liked the explanation!
@inframatic
@inframatic 3 года назад
Isn’t it confusing to type an observable in one way and then it returns something different than the type of the first? Maybe I misunderstanding this
@kekinchheda8097
@kekinchheda8097 3 года назад
Can I apply switchMap() operator more than once one after another?
@medivh1035
@medivh1035 5 лет назад
the compiler tells me switchMap is not a property of Observable?????
@_bykt
@_bykt 5 лет назад
Excellent explanation.
@IsmayilIsmayilov
@IsmayilIsmayilov 4 года назад
​ @Academind You are great tutor . Explained perfectly thanks for that.
4 года назад
man, i do really aprecciate your videos! Thanks for the help! Keep it up
@yYp4rtybo1Xx
@yYp4rtybo1Xx 5 лет назад
Thank you sir, finally I understood switchMap !!
@luxxart
@luxxart 4 года назад
Very clear explanation - thank you!
@aprofromuk
@aprofromuk 7 лет назад
Hey many thanks for the tutorials, quick question, what would be the best way to do if else in RxJS please?
@riteshpatidar9184
@riteshpatidar9184 4 года назад
Thanks, you made it so simple to understand... I am subscribing to your RU-vid Observable/Channel😅
@academind
@academind 4 года назад
Awesome, thank you!
@thepumpedupgeek
@thepumpedupgeek 6 лет назад
I get that it stops old subscriptions, but how's it changing the values?
@KeganVanSickle
@KeganVanSickle 4 года назад
Great tutorial Max!
@sachinhajare5404
@sachinhajare5404 3 года назад
how do we cancel old HTTP request and subscribe to new which are not triggered from an event ?
@EPustovit
@EPustovit 6 лет назад
Pretty clear explanation! Thank you!
@academind
@academind 6 лет назад
Thanks a lot Erop, it really makes me happy to read that!
@nafishasnian1367
@nafishasnian1367 7 лет назад
Max i like your Rxjs series But Everybody is waiting for project based series including me. Stuff that we cant learn by reading documents. I would love to see large scale social network/shopping card based projects. RU-vid lacks those types of videos. Most of the videos are short and doesn't show the right way to do it rather the simple way to do it. If you can, please Make the concept or core technology based videos on Udemy and Project based videos on RU-vid. If they dont understand your project based videos you can always suggest them your Udemy courses.
@academind
@academind 7 лет назад
Thanks for your feedback Nafis! I haven't abandoned project-based series, no worries but I want to cover a broad range of topics and I of course I only want to create such a series if I a) have the time and b) have topics which make sense. There will be project-based videos in the future
@nafishasnian1367
@nafishasnian1367 7 лет назад
Okay awesome. Keep up the good work
@cunhalopes8593
@cunhalopes8593 6 лет назад
I tried to execute in Angular 5 + typescript. but I've got this error : error TS2322: Type 'void' is not assignable to type 'string'. import { Component, ViewChild, EventEmitter,OnInit, OnDestroy } from '@angular/core'; import { Observable, Observer } from "rxjs"; import "rxjs/add/observable/interval"; import "rxjs/add/operator/take"; import "rxjs/add/operator/map"; import "rxjs/add/operator/bufferCount" import { Subscription } from 'rxjs/Subscription'; import { Subject } from 'rxjs/Subject'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { /* @ViewChild("button") button: ElementRef; subscription : Subscription; */ constructor(){ } onDestroy() { // this.subscription.unsubscribe(); } ngOnInit(): void { let input1 = document.querySelector('#input1'); let input2 = document.querySelector('#input2'); let span = document.querySelector('span'); let obs1 = Observable.fromEvent(input1,'input'); let obs2 = Observable.fromEvent(input2,'input'); obs1.mergeMap( (event1:Response)=>{ return obs2.map((event2 : Response)=>{ event1['target']['value']+' '+event2['target']['value'] }) } ).subscribe( (combinedValue )=>{ span['textContent'] =combinedValue;console.log(combinedValue);} ); }
@N96123
@N96123 7 лет назад
Where we gonna use this technically ? BTW Great series!
@academind
@academind 7 лет назад
I'll try to share some projects on this channel where I also show some practical applications of RxJS, that should be helpful :)
@88dejw
@88dejw 5 лет назад
I had problem spotting differences between switchMap and mergeMap, until I found a quote on Medium: "So here’s the simple difference - switchMap cancels previous HTTP requests that are still in progress, while mergeMap lets all of them finish."
@lasseandreasen1518
@lasseandreasen1518 6 лет назад
this is an awesome explanation - thank you
@academind
@academind 6 лет назад
So happy to read that you like the video Lasse, thank you for your comment!
@sanjeetbahadur9377
@sanjeetbahadur9377 3 года назад
great explanation
@ahmedalhisaie7698
@ahmedalhisaie7698 6 лет назад
Thanks, it was clear, but we would like to see these explanations in real situation, right now these operators been used intensively in Ngrx effect , it would be great if you could explain it with that.
@vincolasrj
@vincolasrj 6 лет назад
Awesome explanation!! Help me a lot!!
@academind
@academind 6 лет назад
So cool to read Vinícius, thank you very much for your comment!
@jesulalu6594
@jesulalu6594 4 года назад
Awesome... nandri it was so understandable... mikka mikka nandri
@videderien2
@videderien2 7 лет назад
What are differences between MergeMap and SwitchMap ?
@selimatasever4112
@selimatasever4112 3 месяца назад
why didnt he use pipe function? I thought it was required to create chain operators
@douglasperez3701
@douglasperez3701 Год назад
Such a great video! 🤘
@ngyi3553
@ngyi3553 6 лет назад
Do swicthMap() exists on Subject and BehaviorSubject?
@academind
@academind 6 лет назад
You can use all observable operators on all observable-"like" objects like Subjects, too, yes.
@grzegoszbrzeczyszczykiewic7753
Best explanation , thanks!
@academind
@academind 5 лет назад
Thanks so much Grzegosz!
@almeida.cavalcante
@almeida.cavalcante 5 лет назад
Finally I'm starting to understand this switchMap thing :D haha... isn't it what a throttle design pattern does?
@bohdanonufriychuk5500
@bohdanonufriychuk5500 4 года назад
Can you share a link to what do you mean bt saying `throttle design pattern`?
@uncle-xxi
@uncle-xxi 5 лет назад
That was very helpful! Thanx a lot!!!
@RohithVarma36
@RohithVarma36 5 лет назад
awesome explanation...
@barjosa31blogspot83
@barjosa31blogspot83 6 лет назад
Thank You! Indeed it's helpful!
@academind
@academind 6 лет назад
That's just great to read, thanks a lot for your support!
@alainkr
@alainkr 3 года назад
Super clear
@alex.p
@alex.p 7 лет назад
Thanks a lot! It was very helpful.
@academind
@academind 7 лет назад
Thank YOU for your comment Alex, happy to read that :)
@TahaZgued
@TahaZgued 6 лет назад
Excellente explanation, thanks man keep on
@academind
@academind 6 лет назад
Very happy to read that you like the video Taha, I'll try my best to keep it going!
@udaybsvs8699
@udaybsvs8699 3 года назад
good explanation
@wOOx92
@wOOx92 4 года назад
Can you do another video for exhaustMap, pls? :)
@dxcqcv
@dxcqcv 6 лет назад
can you make a video about exhaustMap?
@alan614
@alan614 6 лет назад
Keep up the great work !
@academind
@academind 6 лет назад
I'll try my best, thank you so much!
@odia-sanatani
@odia-sanatani 6 лет назад
'Rx.' where we can import in angular
@AhmedZERZERI
@AhmedZERZERI 7 лет назад
great job max keep it up :) btw i love your angular 4 course on udemy!
@academind
@academind 7 лет назад
Awesome to hear that, thanks so much Ahmed!
@AhmedZERZERI
@AhmedZERZERI 7 лет назад
Can i put my email here? i'm starting a big project using angular and i really could use some advise from someone with your experience ! i will make sure not to take much of your time as i Can imagine you're a busy person :) thanks a lot again for your great work !
@codeative
@codeative 6 лет назад
So clear .. Thank you
@academind
@academind 6 лет назад
Thanks so much Mostafa!
@danielubanan5503
@danielubanan5503 2 года назад
Thank you.
@BULLSHXTYT
@BULLSHXTYT 7 лет назад
It takes time to understand... I can't understand it for the first time
@artdronax6737
@artdronax6737 7 лет назад
When we see creating real big projects? Example: Shopping Cart
@academind
@academind 7 лет назад
I have two series about that on the channel already ;) Or do you mean with RxJS? There probably will be projects using it in the future, too - no worries.
@herpinmaderpful
@herpinmaderpful 7 лет назад
You should buy his udemy courses, they are EXCELLENT, and you get to see stuff like this used in a larger project scope
@daydreameravani
@daydreameravani 6 лет назад
Expecting a demo project that involved RxJS and Redux-Observer in the future.
@NBUltra187
@NBUltra187 5 лет назад
i wish people would use real world examples for such topics.
@ksas323
@ksas323 3 года назад
Danke Bruder
@Daavlot
@Daavlot 5 лет назад
I subscribed() to this channel
@academind
@academind 5 лет назад
Great to have you on board, thank you!
@codigo_total
@codigo_total Год назад
Buenardo
@xnivaxhzne
@xnivaxhzne 4 года назад
Love u man
@LuXxenatorX
@LuXxenatorX 5 лет назад
is this deprecated?
@marijnstapert9036
@marijnstapert9036 5 лет назад
no
@expertreviews1112
@expertreviews1112 4 года назад
Why didn't he put switchMap inside pipe???
@expertreviews1112
@expertreviews1112 4 года назад
Thnx man... That helped a lot
@chanlito4896
@chanlito4896 7 лет назад
Academind?
@academind
@academind 7 лет назад
Yep, changed the name ;)
@virendrapatel775
@virendrapatel775 4 года назад
👍👍👍
@nergrohombre
@nergrohombre 2 года назад
thanks,
@vukkumsp
@vukkumsp 7 лет назад
Still I have a doubt. I learned that switchMap() is a similar to map() except map() is applied Array object while switchMap() is applied on Streams or Observables. How Observable is similar to an Array... this is really confusing me. please some one help me out, Thank you
@Andrew-tl9gk
@Andrew-tl9gk 6 лет назад
RxJs .map() has nothing to do with arrays. It is for changing data (similar to Array.map). switchMap() is not for changing data, it is for subscribing to an Observable and cancel the old subscription at once.
@tomaszsikora6723
@tomaszsikora6723 4 года назад
This is insanely overcomplicated. Love your tutorials though.