Issue
I am using Angular 15, and for some reason when I place a click event within a mousedown event, the click event doesn't fire. If I don't change the position of the element, (using appendChild
), both the mousedown and click work.
Here is a minimal example:
@Component({
selector: 'my-app',
standalone: true,
imports: [CommonModule],
template: `
<div (mousedown)="mousedown()">
<div (click)="inner()">
Inner
</div>
</div>
`,
})
export class App {
constructor(private readonly el: ElementRef) {}
mousedown() {
const parent = this.el.nativeElement.parentElement as HTMLElement;
parent.appendChild(this.el.nativeElement);
console.log('mousedown');
}
inner() {
console.log('click');
}
}
What I am trying to accomplish, is taking a Material cdk/overlay
bringing it to the front when the overlay is clicked, as the user can open 2+ overlays and they can sit atop of one another. What I am trying to do is when they click on an overlay it brings it to the front in the .cdk-overlay-container
(aka it becomes the first element in the container).
Is there a better way to do this, or a way to make what I have work?
Solution
You can change the "z-index" of the all .cdk-global-overlay-wrapper
Create a function toTop
toTop(el:any)
{
document.querySelectorAll(".cdk-global-overlay-wrapper").forEach((x:any)=>{
x.style.zIndex=x.contains(el)?1000:900
})
}
Then you can, e.g. if you're open a template
<!--see that you pass the template reference variable "content"-->
<ng-template #tpl let-close="close" let-data>
<div #content (click)="toTop(content)"... >
...
</div>
</ng-template>
See stackblitz
Answered By - Eliseo
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.