Angular Dropdown Menu Close On Click Outside

[@MonsterlessonsAcademy]

WATCH NEXT: Angular with NgRx - Building Angular Project From Scratch - kzbin.info/www/bejne/rJTJi2N7htWMiqMsi=BptT7eqgflHIoQiQ

[@kurtkhalidisrael1510]

Thank you very much, I'm a beginner with angular and this helped with my particular use case in my own project! I wish there were more content like this with angular that's freely available.

[@MonsterlessonsAcademy]

Glad it helped!

[@amarjitaliaskaransharma7724]

thank u, I was stuck in these problem upto 2weeks also my senior didn't solved my problems. I hope u making more content like that. Again, Thanks

[@MonsterlessonsAcademy]

Glad it helped!

[@sergeypugach6687]

Great video, it would be nice to have more content like this with Angular

[@MonsterlessonsAcademy]

Thank you!

[@luczztem]

and again you are my hero! thank you so much bro after 2 days searching for anything that worked for what I needed, this was the only solution! thanks a lot!!!

[@MonsterlessonsAcademy]

You are welcome!

[@danielmathers2483]

Great work. Works perfectly.

[@MonsterlessonsAcademy]

Glad to hear that

[@tuku_mann]

Thank you so much, Oleksandr! You helped me a lot)

[@MonsterlessonsAcademy]

Glad to hear that!

[@denisvaraksin7686]

Thank you for your tutorial, clean RxJS usage on this one!

[@MonsterlessonsAcademy]

You are welcome!

[@anasking]

thank u so much buddy i was stuck on this for a week

[@MonsterlessonsAcademy]

You are welcome!

[@ChutinunBellTantasathiar]

thank you very much, great video for angular for beginner

[@MonsterlessonsAcademy]

You are welcome!

[@viacheslavpak2394]

this video is a MUST to watch! thank you

[@MonsterlessonsAcademy]

Thank you!

[@egonknapen4079]

I like your version with fromEvent. The biggest problem I do however have, with this idea, is that if you have, say like 100 elements with clickoutside directives on your page, all those 100 elements will be triggered when you click somewhere. So shouldn't you somehow, disable that subscription and only check, when the menu is opened?

[@MonsterlessonsAcademy]

That's a valid point. If you know in advance that you have 100 elements I would register 1 listener on body and do checks and not register it in every element.

[@nosbookstv9326]

Thanks for that comment, did not think about that before reading your comment, i subscribe only when its open and unsubscribe when close menu or when its destroy and removed afterviewinit. In that way there are no subscription if menu are closed

[@MonsterlessonsAcademy]

@@nosbookstv9326 Sure you can also do that. Depends on your usecase.

[@sumitghewade2002]

This video really helped me a lot.

[@MonsterlessonsAcademy]

Glad to hear that!

[@maneshipocrates]

Thanks. Can someone use this in a navbar with mutiple dropdown menus in TailwindCSS/Angular? Are there any overhead associated with that?

[@MonsterlessonsAcademy]

No if you unsubscribe

[@maneshipocrates]

@@MonsterlessonsAcademy Thanks again. I will see how I can use it. But if you unsubscribe, will it take care of unsubscribing the subscription? Especially if I also want any drop down menu to close if I click outside too.

[@naveenpisher6928]

Very helpfull content, Thank you so much for doing this. Really Appreciated Sir.

[@MonsterlessonsAcademy]

Glad it was helpful!

[@foo3268]

you're saving lives mate

[@MonsterlessonsAcademy]

Well, not literally :D

[@automobilitv]

Thank you very much for this tutorial.

[@MonsterlessonsAcademy]

You are welcome!

[@raphaelrodriguescoelho9375]

Thanks very much for this video! That really help me today at work :)

[@MonsterlessonsAcademy]

Great to hear!

[@mayronalves7888]

TU ME SALVOU DEMAIS, OBRIGADOOOO

[@shanmugakamaleshm4254]

Thanks dude ❤

[@MonsterlessonsAcademy]

No problem 👍

[@federicobalboa9145]

you're the boss! thanks

[@MonsterlessonsAcademy]

You are welcome!

[@sridevisridevi3858]

Thank you ✨💫

[@MonsterlessonsAcademy]

No problem 😊

[@pepikkk10]

Thank you SO much!

[@MonsterlessonsAcademy]

You're welcome!

[@SunnyVakil]

Helpful video, thank you !

[@MonsterlessonsAcademy]

You're welcome!

[@onlydev4099]

thanks you helped me a lot

[@MonsterlessonsAcademy]

Glad I could help!

[@guillermosandoval8416]

Thanks a lot!!!

[@MonsterlessonsAcademy]

You're welcome!

[@SusantaMuduli]

Sir, if I used same drop-down in more than two times means I want more drop down in same page then this outside click directive is not working

[@VinayKrishna-l7z]

Thanks

[@MonsterlessonsAcademy]

Welcome

[@andreifilimonchyk8318]

Thanks. the problem is solved!

[@MonsterlessonsAcademy]

Awesome!

[@SilviuIT-tn3dn]

are you working on creating and uploading a course in Angular on Udemy?

[@MonsterlessonsAcademy]

No because my Angular course is updated and is already there on Udemy www.udemy.com/course/angular-and-ngrx-building-real-project-from-scratch/

[@SilviuIT-tn3dn]

Thx for reply. I didn't saw it. I just enrolled on it now @@MonsterlessonsAcademy

[@SilviuIT-tn3dn]

i also don't understand why Udemy is so dumb. I found your username, i was expecting when i click your profile to see all your courses posted, but i only see a description...@@MonsterlessonsAcademy

[@SuperHaubi]

great video, thanks a lot -- i'd also have one question: within the dropdown i have some buttons with click events like

[@MonsterlessonsAcademy]

You need to use stopPropagation to prevent bubbling an event.

[@studentlearninginformatic4097]

wich theme is used for writing code ?

[@MonsterlessonsAcademy]

It's gruvbox. Here is a video about an editor. kzbin.info/www/bejne/j6Ovmqidec12q80

[@PrashantSingh-lb1xh]

Thank you so much, It helped a lot.

[@MonsterlessonsAcademy]

Glad it helped!

[@drorhandler1316]

First thank you for the video, i'm getting deprecated on the event that the method filter is getting, how can i fix it?

[@MonsterlessonsAcademy]

You have a wrong import. It should come from rxjs not from rxjs/operators

[@gabriel_reguera]

What to do when I use a dropdown with position absolute? it does not work

[@gabriel_reguera]

forget it, I was using pointer-events: none, that's why it didn't work 😅

[@MonsterlessonsAcademy]

Glad you fixed that!

[@alaakhalila9022]

What about host listener?

[@MonsterlessonsAcademy]

Host listener is an imperative example of doing things which doesn't fit good in Angular RxJS concepts. I recommend to do everything in streams/rxjs way as then it is easier to combine and apply different logic.

[@martin-dw]

I have problem. I try this but is not working, the styles are in the global CSS, the directive is on the app folder and the directive is the same of yours but it doesnt work. I dont know exactly why this isn't working, can you please give me some advice or a clue that what could be the problem?

[@martin-dw]

I found out the problem. It was i wrote capitalazed 'ClickOutside"

[@MonsterlessonsAcademy]

Awesome!

[@TechAdiViews]

nice video, one doubt I have, what if we have multiple main menu, then if you click any menu all are showing simultaneously. can you plz send me the code?

[@sudhakargajja4496]

For me also same doubt sir Can you please help

[@MonsterlessonsAcademy]

If you have several menus you need several isOpened states then for every menu.

[@TechAdiViews]

@@MonsterlessonsAcademy yes right but I want dynamically state will change, like when i click on one menu then previous menu state will remove and add it to current mene?

[@MonsterlessonsAcademy]

@@TechAdiViews you set 1 property to false and other to true.

[@sudhakargajja4496]

Hello sir Can you please give code or explanation for ngx-owl-carousal

[@PLXris]

Unfortunately it does not work for me on Angular 17

[@RobG76]

filter(event) is deprecated

[@MonsterlessonsAcademy]

Filter is not deprecated. Please use the correct import. rxjs.dev/api/index/function/filter

[@robertparker3608]

:thumbs up

[@vilzor]

Doing that manual unsubscription seems heavy to me. I would make a BaseComponent that implements OnDestroy having a var of smth ngUnsubscribe: Subject. In that BaseComponent ngOnDestroy function write 2 lines: this.ngUnsubscribe.next() and this.ngUnsubscribe.complete(). Now when developing components extend that BaseComponent and each subscription that needs to be destroyed have a pipe of ...pipe(takeUntil(this.ngUnsubscribe)). Now all of your subscriptions are killed when your component get's destroyed. No more headache of memory leak via subscriptions :)

[@MonsterlessonsAcademy]

This is exactlly what I do in real projects but I don't want to make tutorials more complicated with additional things.

[@jaysizmir9432]

@@MonsterlessonsAcademy Personnally i prefer real projects things. Even if it seems complicated i don't mind !

[@egonknapen4079]

It can be done even much simpler: subs: Subscription = new Subscription(); subs.add(.....subscribe(....); subs.add(.....subscribe(....); subs.add(.....subscribe(....); subs.add(.....subscribe(....); and now just call this.subs.unsubscribe(); in your base class ngOnDestroy() and all 4 are unsubscribed..

[@sudhakargajja4496]

For me it's showing error at this.documentClickSubscription?. unsubscribe (); Showing that expected ":" at above line in my project

[@MonsterlessonsAcademy]

You can take a source code from the description and compare with yours to find a typo.

[@sudhakargajja4496]

@@MonsterlessonsAcademy actually I have used that only previously

[@MrShevrin]

greatable thanx for your channel! remark - this way doesn't work for elemnts if their parent have ViewEncapsulation.ShadowDom

[@MonsterlessonsAcademy]

Thanks for the info! I never used that before.