How to Display Entire Option Value When Hovered in Mat-Autocomplete

How to hover over the angular autocomplete options

One easy way to do this is to put the option text inside a div element with a small max-width. Then style that div element so overflows are normally hidden, but not when the option text is being hovered.

Example: https://stackblitz.com/edit/angular-vzfpjy

One problem with this solution is that the user has to hover over the text of the option to show the full value.

Styling mat-option with Active and Hover - Angular Materials

mat-list-option has mat-option.mat-active class when it's active and mat-option.mat-selected when selected.

Please add the following CSS to your stylesheet:

.mat-option.mat-active {
  background: red !important;
}

The following could be used to style hovering:

.mat-option:hover:not(.mat-option-disabled)

How to style mat-option text to get the text outside mat-select panel on hovering over every mat-option text

Have you considered using matTooltip for each mat-option when hovering above each option?

Add a

matTooltip="{{state.name}} | Population: {{state.population}}"

on mat-option and the angular material does the rest.

check working example here

Styling mat-select when on hover - Angular Material

All CSS changes either you need to make them in the "root" css or use ng-deep like

::ng-deep{
     .mat-option-text:hover:not(.mat-option-disabled) {
      background: #3071a9 !important;
      color: white;
    }

 .mat-option:hover {
      background: red !important;
      color: green !important;
    }
}

Since here you are changing a standard control my recommendation is make this change in your styles.css or based css.

update
Please node you I think what you want to modify is the mat-option-text:hover

Online Demo

Is there a way to call a function when no longer hovering mat-option in Angular?

Use "mouseleave" event (same use as "click") to execute function on stop hover. For detecting typing you can use "keydown" or "keyup" events.

angular 2 extend select when hovered

Something like this should do what you need it to do.

https://stackblitz.com/edit/angular-showmo-nftpk7?embed=1&file=app/select-overview-example.html

Add disabled boolean to interface

export interface Food {
  value: string;
  viewValue: string;
  disabled: boolean;
}

define default food array

foods: Food[] = [
    { value: 'steak-0', viewValue: 'Steak', disabled: false },
    { value: 'pizza-1', viewValue: 'Pizza', disabled: false },
    { value: 'tacos-2', viewValue: 'Tacos', disabled: false },
    { value: 'showSpecials', viewValue: 'Show Specials', disabled: true },
  ];

addSpecials(food) method to append new values if food.value == 'showSpecials'.

 addSpecials(food) {
    if (food.value == 'showSpecials') {
      this.foods.push(
        { value: 'pizza-special-1', viewValue: 'PizzaSpecial', disabled: false },
        { value: 'tacos-2-special-2', viewValue: 'TacosSpecials', disabled: false }
      )
    }
  }

html to disable specials option and call addSpecials() on mouse enter.

<h4>Basic mat-select</h4>
<mat-form-field>
  <mat-select placeholder="Favorite food">
    <mat-option *ngFor="let food of foods" [value]="food.value" [disabled]="food.disabled" (mouseenter)="addSpecials(food)">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

method gets called multiple times in angular material autocomplete

Angular uses changedetection lifecycle multiple times to check if the function has changed for [class.selected] or ngClass. If you use function, it will call multiple times. For this reason the use of function is not advised when you bind, instead you should calculate the values in your component.ts file and just bind the values to ngClass or [class].

Example: Stackblitz

N.B: We know when we change selected value it triggers a event change, we can calculate it and attach the calculation result to the [class.my-class] or ngClass.

How to get mat select selected value in tool tip using angular material

You missed {{}} close curly braces.

I have create demo on stackblitz

Html code

 <mat-select [(ngModel)]="selected" matTooltip="{{getToolTipDEata(selected)}}"  multiple>
    <mat-option  *ngFor="let p of emp" [value]="p" >{{p.name}}</mat-option>
</mat-select>

ts code

selected=null;
  emp=[{
    name:'emp 1'
  },{
    name:'emp 2'
  }]

  getToolTipDEata(data){
    if(data && data.length){
      let msg="";
      data.forEach(res=>{
        msg+=res.name + " ";
      })
      return msg;
    }else{
      return "please select employee";
    }
  }