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

I would do it with a directive. Easy to reuse and it's "the angular way" I think..

create directive:

ng g directive <replaceWithName>

directive.ts

import { Directive, HostListener, ElementRef, Input, Output, OnInit, EventEmitter } from '@angular/core';

@Directive({
  selector: '[appDotTextBox]'
})
export class DotTextBoxDirective implements OnInit {
  @Input() stringArray: string[];
  @Output() stringArrayChange = new EventEmitter();
  @HostListener("keydown.enter", ['$event']) onEnter(event: KeyboardEvent) {
    this.rawValue = this.rawValue += '\n• ';
    event.preventDefault();
  }
  @HostListener("change", ['$event']) change(event) {
    this.stringArrayChange.emit(this.rawValue.split("\n• "));
  }

  constructor(private elementRef: ElementRef) { }

  ngOnInit(): void {
    let temp: string = '';
    this.stringArray.forEach(item => {
      if (temp)
        temp += "\r\n";
      temp += '• ' + item;
    });

    this.rawValue = temp;
  }

  get rawValue(): string {
    return this.elementRef.nativeElement.value;
  }
  set rawValue(value: string) {
    this.elementRef.nativeElement.value = value;
  }
}

component HTML:

<textarea appDotTextBox [(stringArray)]="stringArray"></textarea>

component TS:

stringArray: string[] = ["test1", "test2", "test"];

don't forget to add directive to you module declarations.

I hope I could help (:

Answer 2

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: