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?

Suresh Kumar Ariya · Accepted Answer · 2018-08-26T17:07:10.060

0

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

edited Aug 26 '18 at 17:07

answered Aug 26 '18 at 15:19

Suresh Kumar Ariya

9,516
1
18
27

but that's the click event, that only returns the default value that the input has, because when I make a color change it does not work – Sergio Lopez Aug 26 '18 at 16:34
change the click event to change and try again – Chellappan வ Aug 26 '18 at 17:00
I already did it but for some reason it does not work it never enters the method – Sergio Lopez Aug 26 '18 at 17:05
Sorry, it should be 'change' instead of click. – Suresh Kumar Ariya Aug 26 '18 at 17:06
Yes, it's weird that it does not work, but anyway, thanks, it works, I did it in another way, – Sergio Lopez Aug 26 '18 at 18:06
Created a stackblitz and it worked. https://stackblitz.com/edit/angular-jlbo4m. Might be using inside 'mat-menu' is causing issue. what is the fix – Suresh Kumar Ariya Aug 27 '18 at 02:56

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

1 Answers1