Typescript function, bring the user response to the screen after clicking

Question

Hello. Guys I have a function where I press 3 color buttons (yellow, blue, black) on my screen, I need that when I click these buttons on a div below appear the colors that he is clicking. So the expected behavior is that when I click on yellow appear below the yellow color, blue appear blue etc. The behavior I’m having is that when I click on the buttons it brings the click but without the color. It follows function and html.

loadSequencia(sequencia: String): void{
this.sequencia.push(sequencia);

console.log('sequencia', this.sequencia);
} 

////html of buttons

<button (click)="loadSequencia('Yellow')" style="background-color: Yellow; ">

<button (click)="loadSequencia('blue')" style="background-color: blue;">

<button (click)="loadSequencia('black')" style="background-color: black;">

////html of button response <li *ngFor="Let sequencia of sequencia"> <button (click)="loadSequencia('sequence')" style="background- color: sequence; ">

        </div>
    </li>

  </ul>

Answer 1

In your code, you are missing the interpolation of the variable in your answer.

<li *ngFor="let sequencia of sequencia;">
    <button
      (click)="loadSequencia(sequencia)"
      style="background-color: {{sequencia}};"
    >
      {{sequencia}}
    </button>
  </li>

In the first case, it was only necessary to remove the quotes from loadSequencia('sequencia') for loadSequencia(sequencia). In this case it was not necessary, because it already involved an event (click).

In the case of style and the part within the <button>...</button> interpolation is necessary as it is an interpretation of the text and not an event. Of style="background- color: sequencia;", the correct would be to define how style="background- color: {{sequencia}};".

At angular the interpolation of variables is made through the use of double keys {{}}

The example before the explanation is the corrected version of the excerpt.