Home:ALL Converter>Angular 6 textarea resize event issue

Angular 6 textarea resize event issue

Ask Time:2019-09-12T19:34:34         Author:Miral Kumbhani

Json Formatter

I'm working on an Angular 6 application where I am having a textarea. On having an error, an asterisk sign should be displayed beside the textarea on the top-right corner. The issue I'm having is on resizing the textarea element, there is a gap between the textarea element and the asterisk sign. I think I need to dynamically give the width of the textarea to the asterisk. But, I am not able to to it by CSS or get a (resize) event on it. How to go about it? Any help will be appreciated.

Sample code is given below.


<div class="col-6 fix-custom-width">
    <label for="dataVal"><span>*</span>Data Value</label>
    <textarea id="dataVal" placeholder="Max 20 Characters" tabindex="2"  type="text" class="form-control resizable-textarea" formControlName="dataVal" [ngClass]="{'is-invalid': dataVal.errors && (dataVal.dirty || dataVal.touched || submitted)}" required></textarea>
    <span *ngIf="dataVal.errors && (dataVal.dirty || dataVal.touched || submitted)" class="display-inline error-asterisk">*</span>
    <div class="red-color" *ngIf="dataVal.errors && (dataVal.dirty || dataVal.touched) || submitted">
        <p *ngIf="dataVal.errors && dataVal.errors.required>


.error-asterisk {
  position: absolute;
  right: 0px;
  top: 30px;
  color: $error-message-text-color;

.fix-custom-width {
  max-width: 100%;

.resizable-textarea {
  max-width: inherit;
  resize: both;

Author:Miral Kumbhani,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/57905845/angular-6-textarea-resize-event-issue