Ion-item list from firebase

Ionic Framework ionic-v3
1

hi all,
I can get items in a list from firebase with the next code:

<!-- Loops through and creates multiple items -->
  <ion-item *ngFor="let item of items">
    Item {{item}}
  </ion-item>

Is it possible to put a button behind every item and when push that button that the item name is inserted in a sort of shopping card? Of course it is possible but how? I did the following code behind every item but when i click the button there is an empty value inserted, i dont understand

{{item}} <button type="button" ion-button color="secondary" value="item" (click)="onSubmit()" name="todo" id="todo"> --></button>
2

Please do Like this
<ion-item *ngFor=“let item of items ; let i = index;”>
{{item}} <button type=“button” ion-button color=“secondary” value=“item” (click)=“onSubmit(i)” name=“todo” id=“todo”> →

maybe you can get index in submit() function

3

Why bother dealing with indexes instead of just saying onSubmit(item)?

Incidentally, id="todo" inside an ngFor loop will result in illegal HTML. id must be globally unique in a document.

4

The indexing part is not working. the item in the submit is working but still an empty field in the list. So there is a reaction but without visible data

5

Still empty result when click the button. I guess I have to create a function in the .ts file for onsubmit?

6

Just follow the Hall of Heroes example in the Angular docs.

7

I dont see there an example with also firebase option

8

This is now my button in the html file:

<ion-list *ngFor="let product of products | async">
  <ion-item>
	  {{product.name}} <button type="button" ion-button color="secondary" (click)="onSubmit([test])" name="todo"> --></button>
  </ion-item>
</ion-list>

This is the onsubmit function and is inserted on an other page where todo items are.

onSubmit() {  
		this.todoService.add(this.name, []).subscribe(
			response => {
     			let todo: Todo = {
                  name: this.name,
                  done: false,
                  tags: []
                };
				
			  }         
);
	
}

I know this is not working but how can I use the product.name from the html page in this function?

9

Done

html

<ion-list *ngFor="let product of products | async">
  <ion-item>
	  {{product.name}} <button type="button" ion-button color="secondary" (click)="onSubmit(product.name)" name="todo"> --></button>
  </ion-item>
</ion-list>

ts:

onSubmit(name) {  
		this.todoService.add(name, []).subscribe(
			response => {
     			let todo: Todo = {
                  name: this.name,
                  done: false,
                  tags: []
                };

Thanks all for helping