Angular Dropdown Menu Close On Click Outside

Thanks dude ❤

Thank you SO much!

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

Thanks a lot!!!

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

you're the boss! thanks

thank you very much, great video for angular for beginner

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!!!

filter(event) is deprecated

Thank you very much for this tutorial.

Thanks. the problem is solved!

This video really helped me a lot.

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

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

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?

Thank you so much, It helped a lot.

wich theme is used for writing code ?

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

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

:thumbs up

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.

great video, thanks a lot -- i'd also have one question: within the dropdown i have some buttons with click events like <button type="button" (click)="doSomething()" ...
If i click those buttons, the dropdown also closes. any recommendation on how to avoid that? Thanks!

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?

For me it's showing error at this.documentClickSubscription?. unsubscribe ();

Showing that expected ":" at above line in my project

this video is a MUST to watch! thank you

TU ME SALVOU DEMAIS, OBRIGADOOOO

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?

thanks you helped me a lot

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

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

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 :)

What about host listener?

you're saving lives mate

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

Helpful video, thank you !