title: How to style mat-option text to get the text outside mat-select panel on hovering over every mat-option text
body: <p>I want to style hovering on each mat-option text,  I wan the text to displayed outside mat-option. In order to achieve this, I applied z-index of very high value, but nothing changed.
  I tried add z-index to higher value but this hasn't worked out.</p>
  
  <p>I was inspired by the following <a href="https://stackblitz.com/angular/romvkygmaaa" rel="nofollow noreferrer">stackblitz link</a> </p>
  
  <p>This is the current behaviour</p>
  
  <p><a href="https://i.stack.imgur.com/8Ywvv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8Ywvv.png" alt="enter image description here"></a></p>
  
  <p>Here is what I need
  <a href="https://i.stack.imgur.com/BxAsE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BxAsE.png" alt="enter image description here"></a></p>
  
  <p>Here is the code snippet</p>
  
  <p><strong>template.html</strong></p>
  
  <pre><code>&lt;mat-form-field [style.cursor]="pointer"  [style.width.px]=450 &gt;
    &lt;input  id="inputCustomer" matInput [matAutocomplete]="auto"  [formControl]="customerFilterControl" [(ngModel)]="customerName"&gt;
  
     &lt;mat-autocomplete  style="left:775px;" #auto="matAutocomplete" [displayWith] = "displayFn" &gt;
      &lt;mat-option  (onSelectionChange)="onCustomerChange(customer)" [value] ="customer.AccountID +' '+'('+ customer.AccountName + ')'"&gt;
         &lt;span&gt;{{customerName}}&lt;/span&gt;
    &lt;span id="para2"&gt;{{customerName}}&lt;/span&gt;
      &lt;/mat-option&gt;
  &lt;/mat-autocomplete&gt;
  </code></pre>
  
  <p><strong>template.ts</strong></p>
  
  <pre><code>  customer:Array&lt;any&gt;;
    filteredOptions: Observable&lt;any[]&gt;;
    customerFilterControl = new FormControl();
  customer =[
  {
  AccountID :1,
  AccountName:"account1"
  },
  {
   AccountID:2,
   AccountName:"account2"
  },
  {
   AccountID:3,
   AccountName:"Earliest_Creation_Date_Ent_Tests_id7 (Earliest_Creation_Date_Ent_Tests_id7accountName)"
  }
  
    displayFn(subject) {
      return subject ? subject : undefined;  
    }
  
  
  onCustomerChange(customer) {
  this.filteredOptions = this.customerFilterControl.valueChanges.pipe(
    startWith(''),
    map(value =&gt; this._filter(value))
   );  
  }
  
  
    _filter(value:any):any[] {
  
      const filterValue = value;
      return this.customers.filter(function (option) {
         if(option.AccountID.includes(filterValue) | option.AccountName.includes(filterValue)) {
            return option;
          }
      }); 
    }
  
  </code></pre>
  
  <p><strong>template.scss</strong></p>
  
  <pre><code>#para2 {
  display:none;
  }
  .mat-option:hover {
    background-color: white !important;
    z-index:500000 !important;
    width:440px !important;
    word-break: break-all !important; 
  }
  
  
  .mat-option-text {
    padding-left: 60px !important;
    overflow: auto !important;
    text-overflow: unset !important; 
  }
  
  
  .mat-option {
  
      &amp;:hover {
          white-space: unset!important;
          overflow: unset !important;
          background-color: #FFFFFF;
  
  
          #para2
          {
  
              z-index:500000 !important;
              width:400px !important;
              word-break: break-all !important; 
              display: block;
              position: relative !important;
              overflow: visible !important;
              text-align: left;
              top:0px;
              right:50px !important;
              background-color: #232F34;
              color:#FFFFFF;
              border: 5px !important;
              font-size:11px;
  
  
          }
      }
  }
  </code></pre>