angular 5 why the change does not work within the mat-menu

Question

why it does not work (change) inside a mat-menu.

this is the code that I have

<mat-menu #texpublicity="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="size">Tamaño de letra</button>
  <button mat-menu-item [matMenuTriggerFor]="type">Tipo de letra</button>
  <input type="color" (change)="changeColorLetters($event.target.value)" >
</mat-menu>

  changeColorLetters(color : string){
     this.colorLetters = color;
  }

in this way it works correctly

<mat-menu #texpublicity="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="size">Tamaño de letra</button>
  <button mat-menu-item [matMenuTriggerFor]="type">Tipo de letra</button>
</mat-menu>

 <div>
    <input type="color" (change)="changeColorLetters($event.target.value)" >
 </div>


  changeColorLetters(color : string){
     this.colorLetters = color;
  }

the input works when it is outside the mat-menu, does not work inside, is there some way that it can work within the mat-menu, or am I doing something wrong?

Answer 1

Why can't we try using ElementRef.

<mat-menu #texpublicity="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="size">Tamaño de letra</button>
  <button mat-menu-item [matMenuTriggerFor]="type">Tipo de letra</button>
  <input type="color" #colorElem>
</mat-menu>

Component

@ViewChild('colorElem') colorElem : ElementRef;

ngAfterViewInit() {
    this.colorElem.nativeElement.addEventListener('change', 
     (event)=>{
        // handle click here
     });
}