How to use *ngFor to display only one item from an array?

Question

I made an array called title in my component.ts file:

    this.projectInfo = {
      title: [
        'Title 1',
        'Title 2',
        'Title 3',
        'Title 4',
        'Title 5',
        'Title 6',
      ],

And I want to use only one of the titles in that array for each "project" in my template:

  <div class="item2">
    <img class="center" src="https://natureconservancy-h.assetsadobe.com/is/image/content/dam/tnc/nature/en/photos/tnc_48980557.jpg?crop=961,0,1928,2571&wid=600&hei=800&scl=3.21375">
    <h5 *ngFor="let projectTitle of projectInfo.title">{{projectTitle}}</h5>
    <p>{{ projectInfo.description }}</p>
  </div>
  <div class="item2">
    <img class="center" src="https://natureconservancy-h.assetsadobe.com/is/image/content/dam/tnc/nature/en/photos/tnc_48980557.jpg?crop=961,0,1928,2571&wid=600&hei=800&scl=3.21375">
    <h5 *ngFor="let projectTitle of projectInfo.title">{{projectTitle}}</h5>
    <p >{{ projectInfo.description }}</p>
  </div>
  <div class="item2">
    <img class="center" src="https://natureconservancy-h.assetsadobe.com/is/image/content/dam/tnc/nature/en/photos/tnc_48980557.jpg?crop=961,0,1928,2571&wid=600&hei=800&scl=3.21375">
    <h5 *ngFor="let projectTitle of projectInfo.title">{{projectTitle}}</h5>
    <p>{{ projectInfo.description }}</p>
  </div>

I want to use "Title 1" for the first "project", "Title 2" for the second "project" and so on...

I've tried using let i = index to help specify which title from that array I want to use but couldn't find out how to do it.

I'm still pretty new to Angular, so any help/guidance will be very much appreciated. Thanks!

You're either using angularJS or Angular. Edit the tags in your question to avoid this way too common confusion! — Félix Paradis, Sep 11 '19 at 23:07

score 0 · Answer 1 · answered Sep 11 '19 at 23:09

0

What about:

{{projectTitle[0]}}

?

Replace 0 with i. More here.

answered Sep 11 '19 at 23:09

Bimal Poudel

1,214
2
18
41

score 0 · Answer 2 · answered Sep 11 '19 at 23:10

You put it on the whole block and repeat the block

<div class="item2" *ngFor="let projectTitle of projectInfo.title">
  <img class="center" src="https://natureconservancy-h.assetsadobe.com/is/image/content/dam/tnc/nature/en/photos/tnc_48980557.jpg?crop=961,0,1928,2571&wid=600&hei=800&scl=3.21375">
  <h5>{{projectTitle}}</h5>
  <p>{{ projectInfo.description }}</p>
</div>

How to use *ngFor to display only one item from an array?

2 Answers2