Динамическое добавление элементов DOM на основе нажатия в Angular

Question

У меня есть две кнопки: Изображение и Текст .на основе нажатия этих кнопок я хочу динамически добавить элемент в доменное имя, т.е. либо TextArea, либо ImageArea.

Поскольку мой HTML-код очень длинный, я не могу использовать nativeElement.append (var);

Какой подход я должен использовать сейчас, чтобы динамически добавлять свои элементы в DOM.

Answer 1

правильный ответ зависит от архитектуры вашего приложения и того, что именно вам нужно.Angular предоставляет множество способов добавления элементов в DOM.Самое простое и, что, вероятно, решит вашу проблему, это просто использовать *ngIf, например:

// component.ts

showImage: boolean = false;

// component.html

<img src="img.jpg" *ngIf="showImage">
<button (click)="showImage=true">Show image</button>

Если вы хотите добавить несколько элементов в DOM, вы можете использовать *ngFor:

// component.ts

images: any[] = [];

addImage() {
  this.images.push(this.images.length+1);
}

removeImage() {
  this.images.pop();
}

// component.html

<img src="img.jpg" *ngFor="let img of images">
<button (click)="addImage()">Show an image more</button>
<button (click)="removeImage()">Show an image less</button>

---

Редактировать:

// component.ts

imagesAndTextarea: string[] = [];

addImg() {
  this.imagesAndTextarea.push('img');
}

addTextarea() {
  if (this.iamgesAndTexarea.filter(x => x === 'textarea').length >= 12) return;
  this.imagesAndTextarea.push('textarea');
}

// template.html

<ng-container *ngFor="let el of imagesAndTextarea">
  <textarea .... *ngIf="el === 'textarea'">
  <img .... *ngIf="el === 'img'">
</ng-container>