I am unable to add elements to a array in angular with push method

Question

Here I am trying to get a random number between 0 and 3 and choose an element from array buttonColours based on it and then add the same element to the array gamePattern, the randomChosencolour string(one random colour) is generated and is displayed everytime I click the button, but the gamePattern array does not seem to work,

Template HTML:

<h1>{{randomChosenColour}}</h1>
<h1>{{gamePattern}}</h1>
<button class="btn-primary" (click)="nextSequence()">click here</button>

----------
TS file:

  max_limit=3;
  min_limit=0;
  randomNumber=0;
  buttonColours = ["red", "blue", "green", "yellow"];
  randomChosenColour="";
  gamePattern =[] as any;
  nextSequence()
  { 
    this.randomNumber = this.min_limit + Math.floor(Math.random()*(this.max_limit-this.min_limit+1));
    this.randomChosenColour = this.buttonColours[this.randomNumber];
    this.gamePattern.push(this.randomChosenColour);  
    }

I tried this approach which also does not help.

this.gamePattern.push(Object.assign({}, this.randomChosenColour));

Aniruddh Thakor · Accepted Answer · 2021-12-29 05:04:13Z

1

Please add *ngFor to display all the colors in the array.

<h1>Random Color:{{ randomChosenColour }}</h1>
<h1 *ngFor="let color of gamePattern">{{ color }}</h1>
<button class="btn-primary" (click)="nextSequence()">click here</button>

Here is the working demo link: https://stackblitz.com/edit/angular-ivy-eagqga?file=src/app/app.component.html

answered Dec 29, 2021 at 5:04

Aniruddh Thakor

1,6462 gold badges12 silver badges19 bronze badges

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

Comments

Ricky Mo · Accepted Answer · 2021-12-29 01:58:19Z

1

Use *ngFor to iterate and display an array.

<h1>{{randomChosenColour}}</h1>
<h1 *ngFor="let colour of gamePattern">{{colour}}</h1>
<button class="btn-primary" (click)="nextSequence()">click here</button>

answered Dec 29, 2021 at 1:58

Ricky Mo

7,7682 gold badges22 silver badges41 bronze badges

Collectives™ on Stack Overflow

I am unable to add elements to a array in angular with push method

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related