# Ion-item list from firebase

**URL:** <https://forum.ionicframework.com/t/ion-item-list-from-firebase/130830>\
**Category:** ionic-v3\
**Created:** [May 18, 2018, 8:41pm UTC](https://forum.ionicframework.com/t/ion-item-list-from-firebase/130830 "2018-05-18T20:41:25Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![RenzoM78](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/renzom78/32/124246_2.png) [@RenzoM78](https://forum.ionicframework.com/u/RenzoM78)\
**Post date:** [May 18, 2018, 8:41pm UTC](https://forum.ionicframework.com/t/ion-item-list-from-firebase/130830/1 "2018-05-18T20:41:25Z")

</div>

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

```auto
<!-- 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

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

```

---

<div class="post-metadata">

**Author:** ![whitehorse](https://avatars.discourse-cdn.com/v4/letter/w/0ea827/32.png) [@whitehorse](https://forum.ionicframework.com/u/whitehorse)\
**Post date:** [May 18, 2018, 9:47pm UTC](https://forum.ionicframework.com/t/ion-item-list-from-firebase/130830/2 "2018-05-18T21:47:27Z")

</div>

> [@RenzoM78](#):
>
> item

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

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [May 18, 2018, 9:57pm UTC](https://forum.ionicframework.com/t/ion-item-list-from-firebase/130830/3 "2018-05-18T21:57:44Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![RenzoM78](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/renzom78/32/124246_2.png) [@RenzoM78](https://forum.ionicframework.com/u/RenzoM78)\
**Post date:** [May 19, 2018, 8:02am UTC](https://forum.ionicframework.com/t/ion-item-list-from-firebase/130830/4 "2018-05-19T08:02:26Z")

</div>

> [@whitehorse](#):
>
> ; let i = index;

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

---

<div class="post-metadata">

**Author:** ![RenzoM78](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/renzom78/32/124246_2.png) [@RenzoM78](https://forum.ionicframework.com/u/RenzoM78)\
**Post date:** [May 19, 2018, 8:17am UTC](https://forum.ionicframework.com/t/ion-item-list-from-firebase/130830/5 "2018-05-19T08:17:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![AaronSterling](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@AaronSterling](https://forum.ionicframework.com/u/AaronSterling)\
**Post date:** [May 19, 2018, 8:24am UTC](https://forum.ionicframework.com/t/ion-item-list-from-firebase/130830/6 "2018-05-19T08:24:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![RenzoM78](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/renzom78/32/124246_2.png) [@RenzoM78](https://forum.ionicframework.com/u/RenzoM78)\
**Post date:** [May 19, 2018, 9:52am UTC](https://forum.ionicframework.com/t/ion-item-list-from-firebase/130830/7 "2018-05-19T09:52:48Z")

</div>

> [@AaronSterling](#):
>
> Hall of Heroes example

I dont see there an example with also firebase option

---

<div class="post-metadata">

**Author:** ![RenzoM78](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/renzom78/32/124246_2.png) [@RenzoM78](https://forum.ionicframework.com/u/RenzoM78)\
**Post date:** [May 19, 2018, 10:14am UTC](https://forum.ionicframework.com/t/ion-item-list-from-firebase/130830/8 "2018-05-19T10:14:05Z")

</div>

This is now my button in the html file:

```auto
<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.

```auto
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?

---

<div class="post-metadata">

**Author:** ![RenzoM78](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/renzom78/32/124246_2.png) [@RenzoM78](https://forum.ionicframework.com/u/RenzoM78)\
**Post date:** [May 19, 2018, 10:29am UTC](https://forum.ionicframework.com/t/ion-item-list-from-firebase/130830/9 "2018-05-19T10:29:12Z")

</div>

Done

html

```auto
<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:

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

```

Thanks all for helping

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:35pm UTC](https://forum.ionicframework.com/t/ion-item-list-from-firebase/130830/10 "2021-07-19T21:35:17Z")

</div>

Closed on July 19, 2021, 9:35pm UTC