Display data array in the component

Ionic Framework ionic-v3
1

I have a list with 3 images, and I want to build a component for insert these images in any page of the app.
My component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-logo',
  templateUrl: 'app-logo.html'
})


export class AppLogoComponent {

  @Input() images: Array<string>;

  constructor() {
    console.log('Hello AppLogoComponent Component');

    this.images = ['../../assets/imgs/img1.png', '../../assets/imgs/img2.png', '../../assets/imgs/img3.png'];

  }

}

But, I don’t know with how to call inside de component and add in any page.
This way the path is static.

  <img src="{{images[0]}}" alt="{{alt}}">

How do I do to call inside the component and add one of the 3 images on any page?

2

You can use *ngFor

Example,

<div *ngFor="let item of images">
<img [src]="item">
</div>

If you solve the problem, do not forget to mark it as a solution.
Thank you.

3

Thanks for your help :slight_smile:
But, on the page.
If I want to call the index image 1 for example?

1 Like
4

If you want to use first image you can use this,

<img [src]="images[0]">

Do not forget square brackets => [src]

5

Don’t working for me.
My component.html is:

<div *ngFor="let item of images">
  <img [src]="item">
</div>

If I add in the page this way, It display all images:

  <app-logo> </app-logo>

But I want in the <app-logo></app-logo> display just image 1 for example.

6

I would prefer using a name instead of a numeric index in this situation (for readability and scalability), but the fundamental concept is the same. Pass as an @Input property the identity of the image you want to display, and use it inside app-logo.

7

<app-logo [images]="images[0]"></app-logo>

Would it be this??

Don’t working
:weary: