Add minimal example for cdkTextareaAutosize
- Lenguaje dominante
- TypeScript
- Estrellas
- 25k
- Forks
- 6.8k
- Merge medio
- 1 d 8 h
- PR fusionados (30 d)
- 91
Descripción
#### What is the expected behavior?
The [docs](https://material.angular.io/cdk/text-field/overview) for `Automatically resizing a ` and the [stackblitz example](https://stackblitz.com/angular/aqdvjmmqomd) should only mention what's actually needed to make it work.
#### What is the current behavior?
They mention a whole lot of stuff, **_removing which_** still lets things function! So its not clear why its been put there and its misleading without an explanation.
Extra stuff in the HTML template:
```
#autosize="cdkTextareaAutosize"
```
Extra stuff in the component:
```
import {CdkTextareaAutosize} from '@angular/cdk/text-field';
import {..., NgZone, ViewChild} from '@angular/core';
import {take} from 'rxjs/operators';
...
constructor(private ngZone: NgZone) {}
@ViewChild('autosize') autosize: CdkTextareaAutosize;
triggerResize() {
// Wait for changes to be applied, then trigger textarea resize.
this.ngZone.onStable.pipe(take(1))
.subscribe(() => this.autosize.resizeToFitContent(true));
}
}
```
That's 4 extra imports, a `viewchild` binding and when I put a `console.log` statement inside either `triggerResize` or the subscribed function ... nothing happens ... meaning the code never runs! So what is the point of all that extra stuff? Maybe its actually useful for something else that the docs failed to mention?
#### What are the steps to reproduce?
This [stackblitz](https://stackblitz.com/edit/mat-list-height?embed=1&file=src/app/app.component.html) shows that nothing other than `cdkTextareaAutosize cdkAutosizeMinRows cdkAutosizeMaxRows` is needed to `Automatically resizing a <textarea>`
#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular v7, Material v7 are the versions I used.
#### Is there anything else we should know?
Keep up the good work 👍
Guía de contribución
Línea de trabajo
Comienza con la documentación enlazada de los campos de texto de Angular Material y su ejemplo de StackBlitz; después, compáralos con la reproducción mínima enlazada en el issue. Verifica qué directivas y configuración son necesarias para el redimensionamiento automático; se considera terminado cuando la documentación y el ejemplo muestran solo el código necesario y explican cualquier comportamiento opcional.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- angular, typescript
- Área
- documentation
- Tipo de issue
- Documentación
- Dificultad
- 3/5
- Tiempo estimado
- 1-2 días
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 38/100