How can I replicate a div in Angular 6 using typescript?

Question

How can I replicate a div in Angular 6 using typescript?

I'm currently working on a project focused on providing detailed information about various vehicle components. Each component consists of specific descriptive fields. One feature I'm looking to implement is an "Add another component" button that will duplicate an existing div container with all its associated fields. Of course, the duplicated parent div should have a unique ID. Here's an example:

Within the component's HTML file:

<div id="component-outer">
    <div class="component-inner">
         Component Content....
    </div>
</div>
<button type="button" (click)="clone()">Add Another Component</div>

In the component's TypeScript file:

export class AppComponent {
    clone(){
         Need to clone #component-outer div and append below the last instance 
         of that div, then append the div name on the cloned element.
    }
}

While I typically use JavaScript/jQuery for cloning elements, I'm struggling to find the best approach to achieve exactly what I need in Angular. Would cloning be the appropriate method in this case?

javascript angular typescript clone

Answer 1

Answer №1

To display items from an array as DOM elements, you can utilize the *ngFor directive in Angular.

<div id="component-outer">
    <div *ngFor="let item of items" class="component-inner">
         Component Content....
    </div>
</div>
<button type="button" (click)="append()">Add Another Component</div>

export class AppComponent {
     public items: any[];

     public append() {
          this.items.push({
              // values depend on what an item is
          });
     }
}

This concept is explained in the initial chapter of the first tutorial outlined in the documentation.

Reference link for more details on using *ngFor with arrays

Answer 2

To display items from an array as DOM elements, you can utilize the *ngFor directive in Angular.

<div id="component-outer">
    <div *ngFor="let item of items" class="component-inner">
         Component Content....
    </div>
</div>
<button type="button" (click)="append()">Add Another Component</div>

export class AppComponent {
     public items: any[];

     public append() {
          this.items.push({
              // values depend on what an item is
          });
     }
}

This concept is explained in the initial chapter of the first tutorial outlined in the documentation.

Reference link for more details on using *ngFor with arrays

How can I replicate a div in Angular 6 using typescript?

Answer №1

Similar questions

Exploring the capabilities of the hardware camera in Angular 2

Unexpected object returned by the spread operator

Unlock the Full Potential of TypeScript: Seamless Export of Classes and Functions

I am encountering an issue where Typescript paths specified in the tsConfig.app.json file are not resolving properly

The getElementById() function is unable to locate any matches on the current page

What is the reason behind the continued existence of the @bazel/protractor npm package despite Protractor being marked as deprecated?

Instructions for printing a page and closing the Print window using Selenium

The ng-view directive within AngularJS appears to be malfunctioning

Issue encountered: Unable to locate module due to error: Unable to resolve 'crypto' in 'C:UsersmonkeDocumentsEpiconesb-ui ode_modules eflect-metadata'

The selected data is not being displayed

Synchronizing the call of various views in an Angular application

Verify if the key-value pair can be found within a multi-layered object

Blend field and JavaScript functions while retrieving data from MongoDB

Is there a way to determine if a browser's Storage object is localStorage or sessionStorage in order to effectively handle static and dynamic secret keys within a client?

Starting from TypeScript version 5.6, `Buffer` cannot be categorized as either `ArrayBufferView` or `Uint8Array | DataView`

Showing the previous value in the Select2 select function

AngularJS: The `$locationChangeStart` event

Convenient method for extracting the final element within a jQuery section

JavaScript filename

Solution for accessing the callee function in JavaScript slide down operation