ng-click-outside: Click outside gets fired even for child elements - html

Question

I want to perform some task when i click out of the container.
For this I used ng-click-outside directive. It works fine otherwise except one case. Inside container i have one icon which toggles on click; but with this even clickOutside event gets fired.
I think issue is ng-click-outside checks if targeted element is present in the container and it doesn't finds it as I have toggeling elements in my container.
Is there any hack with this issue?
I have attached one example here
https://stackblitz.com/edit/primeng-treetablesections-demo-nznnjo?file=src/app/app.component.html

Answer 1

the directive has a property [exclude] that we can use. The problems are the "chevrons", so we need exlude the elements with class .p-treetable-toggleror .pi-fw. we can imagine that only write
<!--this NOT work-->
<div class="tree" (clickOutside)="onClickedOutside($event)"
[exclude]="'.p-treetable-toggler,.pi-fw'">
....
</div>
The reason is that the directive not check the elements with this class else, when change the [exclude], store this HTMLElements, and each time we click, check this elements. So if we expand a node, this "chevron" is not store. Well we can create two variables and one function
exclude:string=null
tog:boolean=false;
toogle()
{
this.tog=!this.tog;
this.exclude=this.tog?".p-treetable-toggler,.pi-fw":
".p-treetable-toggler,.pi-fw,.fake"
}
So, we call this function each time we expand/collapsed a node and after we received the data from the service
<!--and (onNodeExpand) and (onNodeCollapse) to the p-treeTable-->
<p-treeTable (onNodeExpand)="toogle()" (onNodeCollapse)="toogle()" ...>
And in ngOnInit
ngOnInit(){
this.nodeService.getFilesystem().then(files => {
this.files = files
setTimeout(()=>{
this.toogle()
})
});
....
}
We use a setTimeout to say to Angular, "first paint the result, after remember call to this.toogle()"
You can see your forked stackblitz
NOTE: if we only need know when We click if we click out or into an element we can use some more simple
If we has a "div"
<div #mydiv>
...
</div>
We can use ViewChildand fromEvent rxjs
#ViewChild('mydiv',{static:true}) element;
fromEvent(document,'mousedown').pipe(map(
res=>this.element.nativeElement.contains(res.target)
)).subscribe(res=>{
console.log(res)
})
Normally we want unsubscribe to the fromEvent, e.g. we only when click outside, make "something" and unsubscribe, so if use filter and take(1):
fromEvent(document,'mousedown').pipe(
filter(res=>!this.element.nativeElement.contains(res.target)),
take(1)
).subscribe(res=>{
console.log('You click outSide')
})