How to color a button corresponding to a selected value?

My question is as follows. I created a simple matrix, with animal names. For each name I generate 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 fine and I can mount the array correctly as per the image below:

And here is the console with the return I get:

Now what I precise 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 come colored, equal to the image above. I have no idea how to do this, any help?

The code snippet I got so far was 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: firebase queries are not a problem, I know how to do. Just need to know how to color the buttons of according to the information that comes from the database.