Adding Items the Ion-List (Ionic)

Question

I have this in my html page:

<ion-content padding>
  <ion-list></ion-list>
</ion-content>

I want to add items to this list from my .ts file. How do I do such a thing?

Sajeetharan · Accepted Answer · 2018-08-12 02:29:27Z

4

Rendering HTML on .ts is not a good option, you should add an Array/Observable on .ts and render it using ngFor

<ion-list>
    <ion-item *ngFor="let term of yourArray;">
        <p>{{term}}</p>
    </ion-item>
</ion-list>

.ts Code will be,

yourArray = ['first','second'];

edited Aug 12, 2018 at 2:29

answered Aug 12, 2018 at 2:26

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

2 Comments

Ron Arel Over a year ago

If I add items to yourArray later during the program, do I have to re-renderfor the items to show up on the list?

Sajeetharan Over a year ago

no need to do, it uses two way databinding so it will be rendered automatically

EDJ · Accepted Answer · 2018-08-12 02:27:51Z

0

What do you mean by "adding ion-items to my .ts file"? You are supposed to add ion-items to your ion-list in the .html file.

Try the following:

<ion-content padding>
   <ion-list>
     <ion-item>
        My first item in this list
     </ion-item>

     <ion-item>
       My second item in this list
     </ion-item>
   </ion-list>
</ion-content>

Please refer to the documentation in order to view a full example of ion-items inside ion-lists.

answered Aug 12, 2018 at 2:27

EDJ

1,0734 gold badges22 silver badges43 bronze badges

2 Comments

Ron Arel Over a year ago

I want to add these items from the ts file

EDJ Over a year ago

Please check the link of the official documentation I have refered to. There are simple examples for displaying items from variables in your .ts file.

Collectives™ on Stack Overflow

Adding Items the Ion-List (Ionic)

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related