Change the background color on ion-select based on the selected value

Question

I'm using Ionic 5.0 and I have an ion-select field. I need to change the background of the field based on the selected option.

I've tried several things. My current attempt in the code below is to insert [ngStyle]="SetBackground(item.id)" in the ion-select but that doesn't work. I've also tried [ngStyle]="SetBackground($event)". I've thought about somehow adding it to a (ionChange)="OnChange($event)" but couldn't figure out how to do that. It seems like I just need to use the item.id to change the background, but for the life of me I just can't figure it out.

Here's my HTML code. I hope this is enough to help me find an answer.

<ion-content>

  <div id="game-board">

    <ion-img class="map-img" src="../assets/img/map-a.png"></ion-img>

    <ion-select [(ngModel)]="selectedVal" class="square" interface="popover" [ngStyle]="SetBackground(item.id)">

      <ion-select-option *ngFor="let item of data" [value]="item.id" >

        {{ item.name }}

      </ion-select-option>

    </ion-select>

  </div>

</ion-content>

And my ts

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  data: { id: string; name: string; }[];

  constructor(private platform: Platform) {
    this.platform.ready().then(() => {
      this.data = [
        {
          id: "transparent", name: ""
        },
        {
          id: "green", name: "Forest"
        },
        {
          id: "red", name: "Village"
        },
        {
          id: "yellow", name: "Field"
        },
        {
          id: "blue", name: "Water"
        },
        {
          id: "purple", name: "Monster"
        },
      ]
    })
  }

  SetBackground(bg) {
    let newColor = {
      'background-color': bg.target.value,
    };
    return newColor
  }

The error I get...

HomePage.html:12 ERROR TypeError: Cannot read property 'id' of undefined
    at Object.eval [as updateDirectives] (HomePage.html:14)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:45259)
    at checkAndUpdateView (core.js:44271)
    at callViewAction (core.js:44637)
    at execComponentViewsAction (core.js:44565)
    at checkAndUpdateView (core.js:44278)
    at callViewAction (core.js:44637)
    at execEmbeddedViewsAction (core.js:44594)
    at checkAndUpdateView (core.js:44272)
    at callViewAction (core.js:44637)

Answer 1

Woo hoo! It works! Thank you so much Arun!

Here's the final HTML code with the ionic stuff included...

 <ion-select [(ngModel)]="selectedVal" [ngStyle]="styleObj" (ionChange)="SetBackground($event)" class="square" interface="popover">

      <ion-select-option *ngFor="let item of data" [value]="item.id" >

        {{ item.name }}

      </ion-select-option>

    </ion-select>

And the ts...

  styleObj = {};

  SetBackground(bg) {
    this.styleObj = {
      'background-color': bg.target.value,
    };
  }

Thanks again!

ps. Here's the next step...

I'd like an 11x11 grid of these select statements on the screen and each of them with an independent color. How would you go about that?

Answer 2

<ion-select [(ngModel)]="selectedVal" class="square" interface="popover" [ngStyle]="SetBackground(item.id)">

  <ion-select-option *ngFor="let item of data" [value]="item.id" >

your SetBackground function is called before the loop. So there is no reference for item.id.

You can something like this.

html

<select [ngStyle]="styleObj" (change)="SetBackground($event)">

  <option *ngFor="let item of data"  value={{item.id}}>

    {{ item.name }}

  </option>

</select>

ts

 data = [
        {
          id: "transparent", name: ""
        },
        {
          id: "green", name: "Forest"
        },
        {
          id: "red", name: "Village"
        },
        {
          id: "yellow", name: "Field"
        },
        {
          id: "blue", name: "Water"
        },
        {
          id: "purple", name: "Monster"
        },
      ];

  styleObj = {};

  SetBackground(e) {
    this.styleObj = {
      'background-color': e.target.value,
    };
  }