угловой 5, почему изменение не работает в мат-меню

Question

почему это не работает (не меняется) внутри mat-меню.

это код, который у меня есть

<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;
  }

, таким образом, он работает правильно

<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;
  }

вход работает, когда он находится за пределами mat-меню, не работает внутри, есть ли какой-то способ, которым он может работать внутри mat-меню, или я что-то не так делаю?

Answer 1

Почему мы не можем попробовать 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>

Компонент

@ViewChild('colorElem') colorElem : ElementRef;

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