Как создать динамический тег div в angular 8.0?

Question

Как создать динамический тег div в angular 8.0?

Я хочу клонировать весь тег div, и внутри этого тега div есть несколько компонентов, таких как текстовое поле, поле выбора и т. Д.

Answer 1

Предположим, что у нас есть компонент, как указано ниже, который мы будем загружать динамически.

import { Component, Input } from '@angular/core';
@Component({
selector: 'app-message',
    template: `<div class="message">{{message}}</div>
})

export class MessageComponent {
@Input() message: string;
}

Для динамической загрузки MessageComponent вам нужен контейнер.Допустим, мы хотим загрузить MessageComponent внутри AppComponent.Нам нужен элемент контейнера в AppComponent.

<div style="text-align:center">
 <h1>
     Welcome to {{ title }}!
 </h1>
 <template #messagecontainer>
 </template>
</div>

Как видите, у нас есть шаблон точки входа или шаблон контейнера, в который мы будем динамически загружать MessageComponent

Answer 2

Простой вопрос, простой ответ: используйте шаблоны розеток.

<ng-container *ngTemplateOutlet="content"></ng-container>
<ng-container *ngTemplateOutlet="content"></ng-container>
<ng-container *ngTemplateOutlet="content"></ng-container>

<ng-template #content>
  <p>
    This is some random content that you can duplicate
  </p>
</ng-template>