How to add bullet points inside angular TextArea with each enter button pressed(keyup or enter)?

Question

Only Angular please!

I want to achieve this http://jsfiddle.net/abhiagrawal87/m39xt/ with angular.

Angular textarea with bulleted list. which reads from array(String), then displayed all array items bulleted and user can also add more when press enter button.

I have found similar solutions like https://stackblitz.com/edit/angular-r5zmbg?file=src%2Fapp%2Fapp.component.html

<form [formGroup]="myForm">
<div formArrayName="things">
    <div *ngFor="let thing of things.controls; let i=index">
        <label [for]="'input' + i">Thing {{i}}:</label>
<input type="text" [formControlName]="i" [name]="'input' + i" [id]="'input' + i" (keyup.enter)="onEnter()"  />
    </div>
</div>

but in this bullets are not inside textarea.

Is it possible?

I have tried : https://stackblitz.com/edit/angular-r5zmbg?file=src%2Fapp%2Fapp.component.html

I was to achieve this http://jsfiddle.net/abhiagrawal87/m39xt/ with angular.

Answer 1

You can listen to focus and keyup/down events, in html template:

<textarea [(ngModel)]="content" placeholder="comment"
  (focus)="mytextOnFocus()"  (keyup)="addBulletText($event)"></textarea>

In your component:

content = ""; // model used for textarea
addBulletText(event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == '13') {
      this.content += '• '
    }

    if (this.content.substr(this.content.length - 1) == '\n') {
      this.content = this.content.substring(0, this.content.length - 1);
    }
  }

  mytextOnFocus() {
    this.content += '• ';

  }

This is completely based on the fiddle you shared in question. You can check the Stackblitz here: