When a user opens the mat-select, I am attempting to set CSS style using custom code. However, I am encountering an undefined error. Upon checking in the console, I noticed that the panel value is returning undefined. Can someone please advise me on how to retrieve the panel value?
Error: Cannot read property 'nativeElement' of undefined
Html:
<mat-select #select (openedChange)="changeHeight($event,select)">
<mat-option>1</mat-option>
<mat-option>2</mat-option>
</mat-select>
component.ts:
import { Component, OnInit, Inject, Renderer2, ElementRef } from '@angular/core';
constructor(private renderer:Renderer2){}
changeHeight(event:any,element:any)
{
if (event)
{
const height = window.innerHeight||
document.documentElement.clientHeight||
document.body.clientHeight;
this.renderer.setStyle(element.panel.nativeElement,
'max-height',
(height-10-element.panel.nativeElement.getBoundingClientRect().y)+'px')
}
}