How to change absolute position of mat-menu in angular 4 material using x and y co-ordinates?
I have implemented opening mat-menu where ever user selectes text.
I have added hidden button which on click opens menu.
On user text selection, I have changed style="display:none;"
of that button to style="display:'';"
and after showing that button, I have changed position of that button to where user has selected the text by x and y co-ordinates and then opened menu programatically by this.menuTrigger.openMenu();
DEMO
menu-example.ts
export class MenuIconsExample {
@ViewChild(MatMenuTrigger)
private menuTrigger: MatMenuTrigger;
addTextToOpns: Array<String> = ["option 1", "option 2", "option 3"];
selectedOption: string = "no Option selected";
onTextSelection(event: any):void{
if(window.getSelection && window.getSelection().toString()){
var menu = document.getElementById('menuBtn');
menu.style.display = '';
menu.style.position = 'absolute';
menu.style.left = event.pageX + 5 + 'px';
menu.style.top = event.pageY + 5 + 'px';
this.menuTrigger.openMenu();
}
}
onMenuClosed():void {
var menu = document.getElementById('menuBtn');
if (menu) {
menu.style.display = 'none';
}
}
addTextTo(selectedOpn): void {
this.selectedOption = selectedOpn + ' selected';
}
}
menu-example.html
<div (mouseup)="onTextSelection($event)">
<button mat-button [matMenuTriggerFor]="menu" id="menuBtn" style="display:none;">Menu</button>
<mat-menu #menu="matMenu" (close)="onMenuClosed()">
<button class="menuOpnBtn" mat-menu-item *ngFor="let opn of addTextToOpns" (click)="addTextTo(opn)">
{{ opn }}
</button>
</mat-menu>
<p>
text for selection
</p>
</div>
<br/>
<br/>
<div><span>selected option : </span> <span>{{selectedOption}}</span></div>