Multiline text area in angular material 2

Question

How do I wrap text and have support for multiple line, using angular material 2 and angular.

<md-input-container fxFlex="18" fxFlexOffset="1">
      <textarea [(ngModel)]="Comments" name="Comments" mdInput placeholder="Comments" ></textarea>
        <md-error>This field is required</md-error>
    </md-input-container>

Wrapping text mean, text should be appear multi line if content is longer than width.

Answer 1

• Doesn't textarea elements have multi-line support? Did you mean setting the rows for the textarea? Just use the native rows attribute and set it to the value (as a number) of your choice.

  <md-input-container fxFlex="18" fxFlexOffset="1">
    <textarea [(ngModel)]="Comments" name="Comments" mdInput placeholder="Comments" rows="3"></textarea>
      <md-error>This field is required</md-error>
  </md-input-container>
  

• As for wrapping the text, I don't really understand what you mean. Could you please elaborate on that?

Answer 2

Not the exact answer for the question but since this is the best match in google search, to set rows for a textarea in angular apperantly we need to usecdkTextareaAutosize, cdkAutosizeMinRowsattributes .

    <mat-form-field>
      <textarea matInput placeholder="Your Message" formControlName="message" cdkTextareaAutosize
        cdkAutosizeMinRows="6"></textarea>
    </mat-form-field>