How to color a button corresponding to a selected value?

Question

My question is as follows. I created a simple matrix with animal names. For each name I push a button dynamically, and manipulate the DOM of this button to get a color for when selected, and a color for when not selected. This works well and I can mount the matrix correctly as the image below:

And here’s the console with the return I get:

Now what I need is. Let’s assume that I select these animals and send them to the firebase database, when I return the query with the chosen animals, I would like these buttons to already be colored, like the image above. I have no idea how to do that, any help?

The code snippet I’ve gotten so far is this:

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-testes',
  templateUrl: 'testes.html',
})
export class TestesPage {

animais: Array<any> = [
  {nome: 'Cachorro', value: 'cachorro'},
  {nome: 'Gato', value: 'gato'},
  {nome: 'Passaro', value: 'passaro'},
  {nome: 'Papagaio', value: 'papagaio'},
  {nome: 'Urso', value: 'urso'},
  {nome: 'Girafa', value: 'girafa'},
  {nome: 'Pinguim', value: 'pinguim'},
  {nome: 'Macaco', value: 'macaco'},
  {nome: 'Tartaruga', value: 'tartaruga'},
  {nome: 'Pato', value: 'pato'},
  {nome: 'Galinha', value: 'galinha'},
  {nome: 'Onca', value: 'onca'},
  {nome: 'Jacare', value: 'jacare'},
  {nome: 'Lagarto', value: 'lagarto'},
  {nome: 'Leopardo', value: 'leopardo'}
];

animaisEscolhidos: Array<any> = [];

@ViewChild('botaoAnimal') botaoAnimal: any;

constructor(public navCtrl: NavController, public navParams: NavParams) {
}

escolherAnimal(animal, botaoAnimal){
  botaoAnimal.selecionado = !botaoAnimal.selecionado;
  /**Aqui eu construo o array de animais, se o botão esta selecionado recebe 
uma cor diferente */
  if (botaoAnimal.selecionado == true) {
    botaoAnimal._elementRef.nativeElement.style.background = '#E83584';
    botaoAnimal._elementRef.nativeElement.style.color = '#FFFFFF';
    this.animaisEscolhidos.push(animal);
    console.log(this.animaisEscolhidos);
  } else {
  /**Se o botão for desmarcado o botão recebe a cor original e remove o item 
  do array */
  botaoAnimal._elementRef.nativeElement.style.background = 'transparent';
  botaoAnimal._elementRef.nativeElement.style.color = '#E83584';
  let index = this.animaisEscolhidos.indexOf(animal);
  if (index > -1) {
    this.animaisEscolhidos.splice(index, 1);
    this.animaisEscolhidos = this.animaisEscolhidos;
  }
 }

}

My HTML:

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col col-12>
        <ion-scroll scrollX="true">
          <button #botaoAnimal ion-button round outline *ngFor="let animal 
           of animais" (click)="escolherAnimal(animal, botaoAnimal)">
           {{animal.nome}}
          </button>
        </ion-scroll>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Note: The firebase querys are not a problem, I know how to do. You only need to know how to color the buttons according to the information coming from the database.

Answer 1

There is a much easier way to do this, just have a property selected for each element of the array that starts empty and then based if you have selected an ng class.

import { Component, ViewChild,OnInit } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-testes',
  templateUrl: 'testes.html',
})
export class TestesPage implements OnInit {

animais: Array<any> = [
  {nome: 'Cachorro', value: 'cachorro'},
  {nome: 'Gato', value: 'gato'},
  {nome: 'Passaro', value: 'passaro'},
  {nome: 'Papagaio', value: 'papagaio'},
  {nome: 'Urso', value: 'urso'},
  {nome: 'Girafa', value: 'girafa'},
  {nome: 'Pinguim', value: 'pinguim'},
  {nome: 'Macaco', value: 'macaco'},
  {nome: 'Tartaruga', value: 'tartaruga'},
  {nome: 'Pato', value: 'pato'},
  {nome: 'Galinha', value: 'galinha'},
  {nome: 'Onca', value: 'onca'},
  {nome: 'Jacare', value: 'jacare'},
  {nome: 'Lagarto', value: 'lagarto'},
  {nome: 'Leopardo', value: 'leopardo'}
];

constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ngOnInit(){
   this.animais=this.animais.map(animal=>{
      return {...animal, selecionado: false}
  }
}

escolherAnimal(animal){
  animal.selecionado = !animal.selecionado; 
 }    
}

in your html

<ul class="animais">
  <li (click)="escolherAnimal(animal)"
      *ngFor="let animal of animais"
      [ngClass]="{'ativo': animal.selecionado}">
    <a>{{ animal.nome }}</a>
  </li>
</ul>

css:

.ativo{
//css equivalente a selecionado
}