Button with value

Ionic Framework
1

Hi all,

I have a input field and when type some text and give enter it is placed in a database:

<form>
<ion-searchbar [(ngModel)]="todo" name="todo" placeholder="Ik heb nodig..."></ion-searchbar>		
		
<button ion-button hidden (click)="addTodo($event)" name="add" block>Toevoegen</button></form>

Now I also want to get data(title) from a json file inside a button but somehow there is nothing happening, I thought it would be easy but hope you cn tell what I do wrong inside the button:

<button *ngFor="let product of ah" ion-button clear type="button" ion-button color="secondary" value="{{ product.title }}" (click)="addTodo($event)" name="todo" item-end>lijstje</button>
2

To make a property of a button dynamic, you have to put it between brackets, like this:

<button *ngFor="let product of ah" ion-button [value]="product.title">Lijstje</button>

3

Ok, thanks, I’ve changed that part but still not working.

Weird thing is that in the form the part of NgModel is need to let it work there. NgModel is not for a button field without a form. Is NgModel usable without forms or is there something else that I have to use in a button field to pass the data?

4

Yes, although it doesn’t make much sense for buttons. Is what you’re looking for something more along these lines?

fruits = [ 'apple', 'banana', 'cherry' ];
chooseFruit(fruit: string): void {
  alert('you chose ' + fruit);
}

<div *ngFor="let fruit of fruits">
  <label>{{fruit}}</label>
  <button (click)="chooseFruit(fruit)">choose</button>
</div>

The point is that you can pass template variables (like fruit in this example) to click handlers. While $event is probably the most common idiom, it’s by no means the only possibility. You could even do (click)="chooseFruit(fruit, $event) if you need to (although that’s fairly rare).

5

Thanks for the answer. I used your option and it works now.