Composant Liste
Comme son nom peut le suggérer, ce composant va nous permettre d'ajouter une liste d'éléments à notre application. Affichons par exemple la liste des principales cryptomonnaies selon leur capitalisation en avril 2018 :
src/pages/mapage/mapage.html
<ion-header>
<ion-navbar color="duckcoin">
<ion-title>Ma Page</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-list-header text-center>
TOP 10 des cryptos en Avril 2018
</ion-list-header>
<ion-item *ngFor="let crypto of cryptos">
<strong>{{ crypto.name }}</strong> vaut environ {{ crypto.price}}
</ion-item>
</ion-list>
</ion-content>
src/pages/mapage/mapage.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-mapage',
templateUrl: 'mapage.html',
})
export class MaPagePage {
cryptos: any = [];
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.cryptos = [
{ 'name': 'Bitcoin', 'price': '$8883,45' },
{ 'name': 'Ethereum', 'price': '$$635,25' },
{ 'name': 'Ripple', 'price': '$0,873466' },
{ 'name': 'Bitcoin Cash', 'price': '$1 392,80' },
{ 'name': 'EOS', 'price': '$11,57' },
{ 'name': 'Litecoin', 'price': '$150,95' },
{ 'name': 'Cardano', 'price': '$0,288146' },
{ 'name': 'Stellar', 'price': '$0,373197' },
{ 'name': 'IOTA', 'price': '$2,12' },
{ 'name': 'NEO', 'price': '$76,89' }
];
}
ionViewDidLoad() {
console.log('ionViewDidLoad SettingPage');
}
}
Qui donne :
Documentation : https://ionicframework.com/docs/components/#lists