Quiero hacer que la altura de mi texto de entrada se ajuste a su contenido de texto . Puedo lograr eso fácilmente cuando el usuario está llenando el contenido activando el evento (input) , que llama a mi función de adjustHeight de altura que actualiza la altura del elemento de entrada usando scrollHeight .
Ejemplo de código a continuación:
<textarea #myLabel (input)="adjustHeight(myLabel)" [(ngModel)]="labelValue"> </textarea> adjustHeight(element: HTMLElement) { element.style.height = "5px"; element.style.height = (element.scrollHeight)+"px"; } Esto funciona bien cuando el usuario está llenando el elemento de entrada, pero cuando el texto de entrada se representa con un labelValue ya lleno (proveniente de una respuesta API), la altura del área de texto no cambia dinámicamente ya que no se activa ningún evento (de entrada) .
Traté de usar el evento (ngModelChange) pero no parece activarse. ¿Hay algún otro evento que pueda vincularse al elemento de entrada para cuidar su altura en el renderizado ? Gracias por adelantado
modelo:
<textarea #myLabel [style.height]="getHeight(myLabel)" [(ngModel)]="labelValue"> </textarea>mecanografiado:
public getHeight(element: HTMLElement): string { return element.scrollHeight + 'px'; }de esta manera, el estilo cambiará cuando sea necesario.
Intente comenzar inicializando labelValue a '' primero (cuando lo declare), y luego asigne su valor como debería estar haciendo ahora.