Adding Items the Ion-List (Ionic)

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?

2 Answers
2

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'];

What would the ts code look like when adding items
– Ron Arel
Aug 12 at 2:27

check the update answer
– Sajeetharan
Aug 12 at 2:29

If I add items to yourArray later during the program, do I have to re-renderfor the items to show up on the list?
– Ron Arel
Aug 12 at 2:32

no need to do, it uses two way databinding so it will be rendered automatically
– Sajeetharan
Aug 12 at 2:33

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.

I want to add these items from the ts file
– Ron Arel
Aug 12 at 2:28

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.
– EDJ
Aug 12 at 2:30

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

搜尋此網誌

Sfyjdyy