CODEWITHSUNDEEP
htmlangular
Vijay V.
Vijay V.

Reputation: 568

How to create dynamic div tag in angular 8.0?

How to create dynamic div tag in angular 8.0?

I want to clone whole div tag and inside that div tag there are multiple components like text-box, select box etc.

Upvotes: 0

Views: 2560

Answers (2)

Pramod kushwaha
Pramod kushwaha

Reputation: 449

Let us assume that we have a component as listed below, which we will load dynamically.

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

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

To load MessageComponent dynamically you need a container. Let us say that we want to load MessageComponent inside AppComponent. We need a container element in the AppComponent.

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

As you can see, we have an entry point template or a container template in which we will load MessageComponent dynamically

Upvotes: 3

user4676340
user4676340

Reputation:

Simple question, simple answer : use template outlets. 

<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>

Upvotes: 0

Related Questions