Angular add button content to array on click

Question

so What I want is, on button click add item.name to a new array :

<button (click)="addDistrict(item.name)" *ngFor="let item of items" ion-button>{{item.name}}</button>

myDist = [];

addDistrict(item.name){
   this.myDist.push(item.name)
  }

How to do that properly ?

You should also post your .html template and typescript file (not entirely but your interfaces and the click event handler would be helpful) — Some random IT boy
– Some random IT boy, Commented Oct 5, 2018 at 10:06

Prashant Pimpale · Accepted Answer · 2018-10-06 04:31:47Z

1

An answer posted by @tftd is correct and which solve your problem too. But I would write something like this:

In HTML:

// Will pass the object in to the method like

<button (click)="addDistrict(item)" *ngFor="let item of items" ion-button> 
   {{item.name}}
</button>

and in TS file:

addDistrict(item){
   // will extract the related key from Object here to push it in array
   this.myDist.push(item.name);
}

StackBlitz Example

edited Oct 6, 2018 at 4:31

answered Oct 5, 2018 at 10:16

Prashant Pimpale

10.7k10 gold badges51 silver badges88 bronze badges

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

Comments

tftd · Accepted Answer · 2018-10-05 10:06:24Z

1

Your addDistrict function's argument is incorrect as well as the varialbe you are passing to it from the template.

In the template you are passing item.name which is a string and then in the function you have item.name again (which yould fail because you can't have a variable name containing a dot). This should work

addDistrict(name){
    this.myDist.push(name)
}

answered Oct 5, 2018 at 10:06

tftd

17.2k11 gold badges67 silver badges117 bronze badges

Collectives™ on Stack Overflow

Angular add button content to array on click

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related