Using Angular and Ionic, how can I add elements to the DOM on a button click

Question

I'm working on an app using Ionic and Angular and would like the user to add input fields as they need. All tutorials I see on this topic are using Angular 1.x and I'm using Angular 4.

Here is the HTML:

<ion-content>

    <ion-row id="row" ng-repeat= "emailinput of emailinputs">
      <ion-col col-3 id="label">
        Email
      </ion-col>
      <ion-col col-8 id="emailcol">
        <input type="email" id="email" placeholder="[email protected]" (keyup.enter)="Send($event.target.value)" [(ngModel)]="emailinput">
      </ion-col>
    </ion-row>

  <div padding>
    <button (click) = "addnewemail(emailinput)" id="register" ion-button full color="nudgetprim" block>Add</button>
    <button (click) = "sendinvite(emailVal)" id="register" ion-button full color="nudgetprim" block>Invite</button>
  </div>

</ion-content>

The Typescript for the button is:

addnewemail(emailinput) {
    console.log(emailinput)
    var emailinputs = [];

    var newItem = emailinputs.length+1;
    emailinputs.push({'id' : 'row' + newItem, 'name' : 'row' + newItem});
}

you want to use *ngFor not ng-repeat. ng-repeat is angular 1....*ngFor="let emailinput of emailinputs". also you dont want to declare emailinputs = [] everytime the function is called you are emptying everything u added previously...emailinputs should be in the scope of the page so you can use it with *ngFor — ewizard
– ewizard, Commented Nov 18, 2017 at 2:18
...im also realizing now you need to provide the type in your emailinput object so you can use it with type= and id=....and you will want the label to change so you can put {{emailinput.name}} there. — ewizard
– ewizard, Commented Nov 18, 2017 at 2:26

ewizard · Accepted Answer · 2017-11-18 17:13:14Z

1

This is what it should look like if I am interpreting what you want correctly. Your id and name attributes of an emailinput don't need to be there unless you have some use for them somewhere else.

<ion-content>

  <ion-item id="row" *ngFor="let emailinput of emailinputs ; let i = index">
    <ion-label>
      Email
    </ion-label>
    <ion-input type="email" id="email{{i}}" placeholder="[email protected]" (keyup.enter)="Send($event.target.value)" [(ngModel)]="emailinput.email"></ion-input>
  </ion-item>

  <div padding>
    <button (click) = "addnewemail()" id="register" ion-button full color="nudgetprim" block>Add</button>
    <button (click) = "sendinvite(emailVal)" id="sendinvite" ion-button full color="nudgetprim" block>Invite</button>
  </div>

</ion-content>

emailinputs = [{'id' : 'row0', 'name' : 'row0', 'email': ''}];

...

constructor(...

...

addnewemail() {
    let newItem = this.emailinputs.length;
    this.emailinputs.push({'id' : 'row' + newItem, 'name' : 'row' + newItem, 'email': ''});
}

edited Nov 18, 2017 at 17:13

answered Nov 18, 2017 at 2:56

ewizard

2,8924 gold badges56 silver badges113 bronze badges

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

3 Comments

cfoster5 Over a year ago

Thanks, that worked!Could you explain how to explain how to pass [(ngModel)]="emailinput.email" into the "sendinvite()" function.

ewizard Over a year ago

np, when u click send the invite is it only supposed to send the email associated with that block...if that is the case...you put the button inside ion-item and do <button (click) = "sendinvite(emailinput.email)" or maybe you want it to send invites to all of the emails?

cfoster5 Over a year ago

Yes, I'd like that function to send invites to all entered emails!

Collectives™ on Stack Overflow

Using Angular and Ionic, how can I add elements to the DOM on a button click

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related