angular / angular/components

Add minimal example for cdkTextareaAutosize

Aperta
#15,813 6 commenti 7 reazioni 0 assegnatari Vedi su GitHub
area: material/input docs feature help wanted P5
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia dalla documentazione collegata sui campi di testo di Angular Material e dal relativo esempio StackBlitz, quindi confrontali con la riproduzione minima collegata nell’issue. Verifica quali direttive e quale configurazione sono necessari per il ridimensionamento automatico; il lavoro è completo quando la documentazione e l’esempio mostrano solo il codice necessario e spiegano qualsiasi comportamento opzionale.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
documentation
Tipo di issue
Documentazione
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
38/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.