Updating ngIf through array iteration. Making a simple slide show

Question

I was playing around with creating my own image slide show and started playing around with arrays. I'm wasn't sure how to approach this problem, so I set ngIf's in each element that I wanted to show and hide, set values in the class for each, then pulled those into an array.

I think that's where I'm going wrong, but I don't see it. I can get the slideShow function to update each Array element to True through each iteration, but I'm not sure what to return. I think I'm missing something really simple, but I'm not sure what.

Here's the stackblitz UPDATED WITH ANSWER https://stackblitz.com/edit/angular-9ydflj

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

  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
  })
  export class AppComponent implements OnInit {
    slider1 = true;
    slider2 = false;
    slider3 = false;
    slider4 = false;

    constructor() {}

    ngOnInit() {
      this.slideShow();
    }
    slideShow() {
      const time = 2000;
      const slideArray = [this.slider1, this.slider2, this.slider3, this.slider4];

      for (const images in slideArray) {
        if (images) {
          timeout(images);
        }
      }
      function timeout(images) {
        window.setTimeout(() => {
          slideArray[images - 1] = false;
          slideArray[images] = true;
          console.log(slideArray[images], images, slideArray);
        }, time * images);
        return slideArray[images];
      }
    }
  }

Answer 1

Define slideArray as a component class property

// probably just above constructor
slideArray = [this.slider1, this.slider2, this.slider3, this.slider4];

Then in timeout function:

replace all slideArray with this.slideArray

When you call timeout(images);, do it as timeout.call(this, images);

After you finish all above, slideArray will be the return value and be avaible in the component html file