Add DOM element on Button click with Angular 2+

Question

Hi I'm learning how to manipulate the DOM with Angular 2+ and I want to add an Input field with type email when the click event is triggered. I've researched a bit with google, but couldn't find a soluion with Angular2+.

<form>
<fieldset>
  <legend>
    <span class="number">3</span>E-Mail Receipants</legend>
  <input type="email" name="email1" placeholder="E-Mail Recipients [email protected]">
  <input type="button" value="Add E-Mail" (click)="addInputEmail()">
</fieldset>
<input type="submit" value="Generate Template" />

How can I generate extra inpult fields under the already existing one? What are my tools to use?

addInputEmail(){
}

On each button click a new input field should be generated. Im kinda hopeless because I don't know what 'Tools' I have to manipulate it in the first place.

Thanks.

What have you tried so far? or are you asking us to do it for you? — Mike Tung
– Mike Tung, Commented Feb 7, 2018 at 14:32

charsi · Accepted Answer · 2018-02-07 15:30:02Z

5

Something like this should work --

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

Hope this makes sense.

You are building the input elements based on the array of emails. And on the button press you add to the array which creates a new input in the template.

edited Feb 7, 2018 at 15:30

answered Feb 7, 2018 at 14:36

charsi

4,14728 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Add DOM element on Button click with Angular 2+

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related