Display array in the DOM

Question

I'm sorry for my little knowledge in Angular. I'm learning it :)

I Would like to display in the template an array field. And it doesn't work in the way I'm doing it. :(

Home.page.TS

appInfo: any[] = [
    {
      title: 'Chapitre 1',
      description: 'Contenu'
    }
  ];

home.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Application de Test
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content >
  <h1>{{appInfo.title}}</h1>
  <ion-text>{{appInfo.description}}</ion-text>

</ion-content>

It doesn't show the filed.

You need to loop it with `*ngFor` like `{{data.title}} {{data.description}} ` — Sourav Dutta, May 17 '19 at 20:06
Possible duplicate of [How exactly works the Angular \*ngFor in this example?](https://stackoverflow.com/questions/44521677/how-exactly-works-the-angular-ngfor-in-this-example) — dota2pro, May 17 '19 at 20:15

score 0 · Accepted Answer · answered May 17 '19 at 20:04

0

Use ngFor to iterate over arrays:

<ion-content *ngFor="let info of appInfo">
  <h1>{{info.title}}</h1>
  <ion-text>{{info.description}}</ion-text>
</ion-content>

If you want to display just the first item:

<ion-content *ngIf="appInfo && appInfo.length > 0">
  <h1>{{appInfo[0].title}}</h1>
  <ion-text>{{appInfo[0].description}}</ion-text>
</ion-content>

answered May 17 '19 at 20:04

pzaenger

11,381
3
45
46

*ngFor is the only way ? – JBD May 17 '19 at 20:06
Thanks so much. I was looking for the solution with first item :) – JBD May 17 '19 at 20:21
Can i ask you on more question ? What about if i want to show the second Item ? – JBD May 17 '19 at 20:22
Then do something like ` 1">
{{appInfo[1].title}}
...`. However, `ngFor` is your friend. You can also use `index`: `*ngFor="let info of appInfo; let index"`. – pzaenger May 17 '19 at 20:25
1

Thanks so so much. pzaenger – JBD May 17 '19 at 20:35
You are welcome. Just take a look at the [API](https://angular.io/api/common/NgForOf): everything you need is there. – pzaenger May 17 '19 at 20:40

Denuka · Answer 2 · 2019-05-17T20:27:32.693

Use *ngFor structural directive

<ion-header>
 <ion-toolbar>
   <ion-title>
    Application de Test
  </ion-title>
 </ion-toolbar>
</ion-header>

<ion-content *ngFor="let infor of appInfo">
 <h1>{{infor.title}}</h1>
 <ion-text>{{infor.description}}</ion-text>
</ion-content>

Another long way to get array data is given.

    heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
    myHero1 = this.heroes[0];
    myHero2 = this.heroes[1];
    myHero3 = this.heroes[2];
    myHero4 = this.heroes[3];

.html file

    <p [innerText]="myHero1"></p>
    <p [innerText]="myHero2"></p>
    <p>{{myHero3}}</p>
    <p>{{myHero4}}</p>

Your second approach looks interesting too, and useful in some context. Thanks a lot. I will keep this in mind too :) — JBD, May 17 '19 at 20:43

Display array in the DOM

2 Answers2

{{appInfo[1].title}}