angular/components

Add minimal example for cdkTextareaAutosize

Open

#15.813 aperta il 13 apr 2019

Vedi su GitHub
 (6 commenti) (7 reazioni) (0 assegnatari)TypeScript (6650 fork)batch import
P5area: material/inputdocsfeaturehelp wanted

Metriche repository

Star
 (24.044 star)
Metriche merge PR
 (Merge medio 2g 16h) (80 PR mergiate in 30 g)

Descrizione

What is the expected behavior?

The docs for Automatically resizing a <textarea> and the stackblitz example 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 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 contributor