Creating a new element in the DOM when a button is clicked using Angular 2+

Question

Creating a new element in the DOM when a button is clicked using Angular 2+

Greetings! I am currently in the process of learning how to manipulate the DOM using Angular 2+ and my goal is to incorporate an Input field with type email when the click event is activated. Despite conducting some research via Google, I have been unable to find a solution that aligns with Angular2+.

<form>
<fieldset>
  <legend>
    <span class="number">3</span>E-Mail Receipants</legend>
  <input type="email" name="email1" placeholder="Email Recipients <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dab0b5b2b4f4beb5bf9ab7bbb3b6f4b9b5b7">[email protected]</a>">
  <input type="button" value="Add Email" (click)="addInputEmail()">
</fieldset>
<input type="submit" value="Generate Template" />

My primary concern is understanding how I can generate additional input fields beneath the pre-existing one. What tools are available for me to utilize within this context?

addInputEmail(){
}

Essentially, I would like a new input field to be created every time the button is clicked. Unfortunately, I feel lost as I am uncertain about the 'Tools' needed to effectively manipulate it initially.

Many thanks in advance.

angular typescript dom

Answer 1

Answer №1

Here is a solution that should do the trick --

 <div *ngFor='let email of emails'>
   <input type="email" [attr.name]="email" >
 </div>
 <input type="button" value="Add E-Mail" (click)="addInputEmail()">

--

export class formComponent {
  emails = ["email1"];
  emailNumber = 1;
  constructor () {

  }

  addInputEmail() {
    this.emailNumber++; 
    this.emails.push("email"+this.emailNumber)
  }
}

I hope this explanation helps.

This code dynamically generates input elements based on the array of emails. When you click the button, it adds a new entry to the array which in turn creates a new input field in the template.

Answer 2

Here is a solution that should do the trick --

 <div *ngFor='let email of emails'>
   <input type="email" [attr.name]="email" >
 </div>
 <input type="button" value="Add E-Mail" (click)="addInputEmail()">

--

export class formComponent {
  emails = ["email1"];
  emailNumber = 1;
  constructor () {

  }

  addInputEmail() {
    this.emailNumber++; 
    this.emails.push("email"+this.emailNumber)
  }
}

I hope this explanation helps.

This code dynamically generates input elements based on the array of emails. When you click the button, it adds a new entry to the array which in turn creates a new input field in the template.

Creating a new element in the DOM when a button is clicked using Angular 2+

Answer №1

Similar questions

The promise briefly returns a placeholder object before resolving with the actual response

Creating new routes and lazy-loading in Angular CLI page generator

When compiling for production, I am encountering an issue where the hashed files are resulting in 404 errors for users when they try to refresh. I am unsure of the best

Experiencing a Typescript error when trying to access a property within a nested object

Issues with running NPM script for compiling TypeScript code

Encountering a "subscribe is not a function" error while attempting to utilize a JSON file in Angular 2

The 'Element[]' type is lacking certain properties when dealing with react children

Angular: Tailoring the Context Menu

Developed a customized checkbox component using React

The process of expanding a nested node in the Angular Material tree with deeply nested data

Make leaflet function operate synchronously

Switching the Angular host using @input directive

Typescript error encountered when executing multiple API calls in a loop causing Internal Server Error

Tips for interfacing with Angular ColorPicker elements using Selenium WebDriver

Encountering errors in Angular when trying to access a property that is undefined using

The data in DataTables is loading correctly, however, the buttons and sorting features are not operating as intended within Angular 4

What is the best way to handle alias components in next.js when using ts-jest?

Rotate object within HTML table

Can you advise on how to generate a key to access an environment.ts value within a *ngFor loop? Specifically, I am trying to locate keys that follow the pattern 'environment.{{region}}_couche_url' within the loop

What is the correct way to invoke a function from an external JavaScript file using TypeScript?