angular / angular/components

Add minimal example for cdkTextareaAutosize

Ouverte
#15,813 6 commentaires 7 réactions 0 personnes assignées Voir sur GitHub
area: material/input docs feature help wanted P5
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

#### 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 👍

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par la documentation liée sur les champs de texte Angular Material et son exemple StackBlitz, puis comparez-les avec la reproduction minimale liée dans l’issue. Vérifiez quelles directives et quelle configuration sont nécessaires pour le redimensionnement automatique ; la tâche est considérée comme terminée lorsque la documentation et l’exemple ne montrent que le code nécessaire et expliquent tout comportement facultatif.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
documentation
Type d'issue
Documentation
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
38/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.