Solution 1 :

Look at the following stackblitz.

You basically need to loop through your array with a timeout.


    if(i < this.nums.length){
      setTimeout(() => {
        this.lastNum = this.nums[i];
      }, 1000)

and bind lastNum in your template.

Problem :

The way that I am doing it is that I want each of the numbers to appear then disappear. I have tried a lot of options but only the last number ends up showing when there are two or more numbers in the array. I suspect it has something to do with the for loop, but there does not seem to be a way around it.
Here is my typescript code for the generate numbers function:

  generateNumbers() {
    let numbersArray = new Promise<number[]>((resolve, reject) =>  {
      let numberArray: number[] = []
      for (let i = 0; i < this.level; i++) {
        .fromTo('opacity', '1', '0.05').play()
        .then(func => {
          let randomnum = Math.floor(Math.random() * 9)
          this.currentIndex = i  
          this.currentNumber = randomnum
          this.parsedCurrentNumber = JSON.parse(JSON.stringify(this.currentNumber))
        }).then(func => {
          .fromTo('opacity', '0.05', '1').play()
        }).then(func => {
          if (i === this.level - 1) {
  return numbersArray

Here are my variable declarations and injections:

  @ViewChild('currentNumber', { read: ElementRef, static: true}) currentNum: ElementRef;
  level: number = 1;
  levelExp: number = 1;
  gameHasBegun = false;
  paused = false;
  numbersArray: number[] = [];
  answer: string;
  wrongcount: number = 0;
  wrong = false;
  lost = false;
  currentIndex: number = 0
  currentNumber: number;
  parsedCurrentNumber: string;
    private router: Router,
    private menu: MenuController,
    private animationCtrl: AnimationController ) { }

Here is how I call my generate function:

      (val) => this.numbersArray = val

Here is my HTML Code for the part where the numbers should be shown, but instead only one number is shown when I have two or more numbers in my array:

<ion-content #currentNumber>
  <ion-label  class="ion-text-center" >
    <h1>{{ parsedCurrentNumber }}</h1>


Comment posted by Adil Khalil

Glad that it helped you. Please accept this as answer.


Leave a Reply

Your email address will not be published. Required fields are marked *