Checkbox toggle within

I am working on adding checkboxes inside 'p-dialog' part of primeng package. However,I am stuck at a UI issue, when I try to check uncheck the checkbox manually from UI,it doesnt work also the change or click event does not fire for the same. Posting below part of code related of checkbox. Could someone suggest as to what needs to be fixed to get it working.

Html code

<p-dialog modal="modal" width="600" [responsive]="true" [closable]="false">
    <p-header>
      <span>Dialog</span>
    </p-header>
    <input type="checkbox" [name]="chkMyself" [id]="chkMyself" (change)="toggleVal($event)" >             
              <label for="chkMyself">Myself</label>
</p-dialog> 

Component code

import { Component,  Output,ViewChild, EventEmitter, ViewEncapsulation } from '@angular/core';
import { Dialog } from 'primeng/primeng';

@Component({
  selector: 'app-dialog',
  templateUrl: './app-dialog.component.html',
  styleUrls: ['./app-dialog.component.scss']
})
export class AppDialogComponent {
  
  @ViewChild(Dialog) public theDialog: Dialog;
  public dialogTitle: string;
  public chkMyself: boolean = false; 

  constructor( ) {       
    }
    private _display: boolean = false;

    get Display(): boolean {
        return this._display;
    }
    set Display(val: boolean) {
        this._display = val;
        if(val){
          this.show("Dialog Test");
        }       
    }
     
  public toggleVal(event): void {
   debugger
    this.chkMyself = !event.target.checked;
}
 
  public show(dialogTitle: string)
  {    
     this.dialogTitle = dialogTitle;  
      this.theDialog.visible=true;
  }
}