I have provided two separates button for Ctrl+z and Ctrl+y. I want the Ctrl+z and Ctrl+y functionality to be performed on the click of a button. Here is my function.

undoText(event:MouseEvent){
    var element =   document.getElementById("undoBt")
     if(element){
        element.dispatchEvent(new KeyboardEvent('keydown',{composed: true, bubbles:true, cancelable:true, code:"ControlLeft", ctrlKey:true, key:'Control',keyCode:17, location:1}));
        element.dispatchEvent(new KeyboardEvent('keydown',{bubbles:true,   cancelable:true, code:"KeyZ", composed:true, ctrlKey:true, key:'z', keyCode: 90}));
       }

  }

Here is my html.

<mat-icon matTooltip="Undo"  (click)="undoText($event)" *ngIf="svgInit" id="btn1" class="undo" svgIcon="undo" aria-hidden="false" aria-label="undo">
        </mat-icon>

To achieve this, I am trying to trigger Ctrl+z and Ctrl+y on button click but they are not getting triggered and I'm not able to set isTrusted property true.

What is wrong with the code?