Как динамически добавить текстовую область в том же стиле, что и другие текстовые области в том же элементе div. Angular CLI

Question

Я хочу добавить текстовую область нажатием кнопки. Эта текстовая область должна иметь тот же стиль, что и другие в том же div. Я хочу добавить к нему класс "note", который я создал в своем файле CSS.

my-nav.component. html

<div class="square" id="notes" ng-repeat="textArea in textAreas">
  <textarea autofocus class ="note" style="font-size: 15px" placeholder="Apple"></textarea>
</div>

my-nav.component.ts

 onClickAdd() {
   const div = document.createElement("TEXTAREA");
   div.innerHTML = "CLICK ME";
   div.classList.add("note");
   document.getElementById("notes").appendChild(div);
 }

CSS

.note {
  background-image: -webkit-linear-gradient(90deg, #d0a090 1px, #d0a090 1px), linear-gradient(#fdf8c8, #fdf8c8 23px, #ccd 23px, #ccd 24px, #fdf8c8 24px);
  background-image: linear-gradient(90deg, #d0a090 1px, #d0a090 1px), linear-gradient(#fdf8c8, #fdf8c8 23px, #ccd 23px, #ccd 24px, #fdf8c8 24px);
  background-image: -ms-linear-gradient(90deg, #d0a090 1px, #d0a090 1px), linear-gradient(#fdf8c8, #fdf8c8 23px, #ccd 23px, #ccd 24px, #fdf8c8 24px);
  background-image: -o-linear-gradient(90deg, #d0a090 1px, #d0a090 1px), linear-gradient(#fdf8c8, #fdf8c8 23px, #ccd 23px, #ccd 24px, #fdf8c8 24px);
  background-image: linear-gradient(90deg, #d0a090 1px, #d0a090 1px), linear-gradient(#fdf8c8, #fdf8c8 23px, #ccd 23px, #ccd 24px, #fdf8c8 24px);
  background-size: 2px 100%, 100% 24px;
  background-position: 40px top, left 0px;
  background-repeat: no-repeat, repeat;
  line-height: 24px !important;
  background-attachment: local;    
}

В настоящее время это выглядит так:

Answer 1

нг-повтор для AngularJS. Для Angular вы захотите использовать * ngFor, и это будет выглядеть следующим образом:

https://stackblitz.com/edit/ngfor-textarea

<button (click)="addTextArea()" style="margin-bottom: 10px;"> Add Text Area</button>
<div class="square" id="notes" *ngFor="let textArea of textAreas">
    <textarea autofocus class="note" [(ngModel)]="textArea.value" style="font-size: 15px"  placeholder="Apple"></textarea>
</div>

<h5>Text Area Values</h5>
<ul>
  <li *ngFor="let textArea of textAreas">{{textArea | json}}</li>
</ul>

и компонент

  textAreas: { value: string }[] = [{value: ''}];

  addTextArea() {
    const textArea = { value: '' };
    this.textAreas.push(textArea)
  }

Я также добавил пример передачи значения в качестве параметра.