Angular 2+ display array item in html

Question

I recently started learning angular and wanted to create a slider.

I created an array of objects which will hold data for the sliders images and tried to display them in my components html file like this:

Ts file:

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-slider',
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.scss']
})
export class SliderComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    type sliderImgMeta = Array<{id:number,src:string,alt:string}>;

    const arr: sliderImgMeta = [
      {id: 1, src: './img/slider1', alt: 'alt1'},
      {id: 2, src: './img/slider2', alt: 'alt2'},
      {id: 3, src: './img/slider3', alt: 'alt3'}
    ]
  }

}

And the html file:

<section id="slider">
  <div id="slider-content">
    <img src="{{arr[0].src}}" alt="{{arr[0].alt}}">
  </div>
  <div id="slider-navigation">
    <span id="moveLeft"><</span>
    <span id="moveRight">></span>
  </div>
</section>

In return im getting ERROR TypeError: Cannot read property '0' of undefined and unfortunetly have no idea how to resolve it.

Artyom Amiryan · Accepted Answer · 2018-12-20 14:55:09Z

2

you haven't arr property in your class, instead you created variable in ngOnInit which is accessible only inside it, try this way and note also that sliderImgMeta type should be outside of class

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

type sliderImgMeta = Array<{id:number,src:string,alt:string}>;

@Component({
  selector: 'app-slider',
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.scss']
})
export class SliderComponent implements OnInit {
  arr: sliderImgMeta = [];
  constructor() { }

  ngOnInit() {
    this.arr = [
      {id: 1, src: './img/slider1', alt: 'alt1'},
      {id: 2, src: './img/slider2', alt: 'alt2'},
      {id: 3, src: './img/slider3', alt: 'alt3'}
    ]
  }

}

answered Dec 20, 2018 at 14:55

Artyom Amiryan

2,9961 gold badge16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

aMJay Over a year ago

That solved the issue thanks for the explanation as well :) will mark as solved in a few minutes

Artyom Amiryan Over a year ago

@aMJay ok glad to help !!

Emircan Ok Over a year ago

This solution works. But, it will throw error once. Because when view is ready, property isnt defined yet. If you want see this error, you can add ngIf to view.@aMJay

Artyom Amiryan Over a year ago

@EmircanOk it will not throw error because ngOnInit triggers before view init, so when view will start init arr property will be ready

Emircan Ok · Accepted Answer · 2018-12-20 15:00:34Z

0

You define property in class for access from view.

    import { Component, OnInit } from '@angular/core';
    @Component({
      selector: 'app-slider',
      templateUrl: './slider.component.html',
      styleUrls: ['./slider.component.scss']
    })

    type sliderImgMeta = Array<{id:number,src:string,alt:string}>;    

    export class SliderComponent implements OnInit {

      arr: sliderImgMeta = [
          {id: 1, src: './img/slider1', alt: 'alt1'},
          {id: 2, src: './img/slider2', alt: 'alt2'},
          {id: 3, src: './img/slider3', alt: 'alt3'}
        ];

      constructor() { }

      ngOnInit() {

      }

    }

answered Dec 20, 2018 at 15:00

Emircan Ok

3572 silver badges14 bronze badges

Collectives™ on Stack Overflow

Angular 2+ display array item in html

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related