Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change the background color of the item selected from the list?

Tags:

angular

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

export class Hero {
    name: string;
}

const HEROES: Hero[] = [
    { name: 'STWX1' },
    { name: 'STWX2' },
    { name: 'STWX3' },
    { name: 'STWX4' }
];

@Component({
    selector: 'my-app',
    template: `
        <div style="display: inline-block; width = 200px; ">
            <ul class="heroes">
                <li *ngFor="let hero of heroes" (click)="onSelect(hero)"
                    [class.selected]="hero === selectedHero">
                     <p [style.background-color]="getStyle()">{{hero.name}}</p>
                </li>
           </ul>
       </div>'
   ,
   styles: [...]
})

export class AppComponent  {
 public showStyle: boolean = false;

    name = 'Angular1';
    testRequestId = '3224';
    heroes = HEROES;
    selectedHero: Hero;

    goToDivClick() {
        return HEROES;
    }

    onSelect(hero: Hero): void {
        this.showStyle = true;
        this.selectedHero = hero;
    }

getStyle() {
        if (this.showStyle) {
            return "grey";
        } else {
            return "";
        }
    }
}

I want to change the background of the item selected from a list. As per my code above, I have a list and I am trying to call a method getStyle() to change the background color of the selected item to Yellow. As of now, its changing color for all the list items. I am not getting how to specifically change color only for the selectedhero in my example. Can you please let me know where am I going wrong.

like image 374
test Avatar asked Feb 08 '17 19:02

test


People also ask

How do I change the background color of a list in HTML?

To add background color in HTML, use the CSS background-color property. Set it to the color name or code you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a table, heading, div, or span tag.

How do you change the color of the background?

Select Start > Settings > Personalization > Colors, and then choose your own color, or let Windows pull an accent color from your background.

Which option is used to change the background by selection?

Press the Windows key , type Settings, and then press Enter . In the Settings window, select the Personalization option from the left navigation menu. On the right side of the window, click the Background option.

How do I change the background color of my navigation bar in HTML?

Use any of the . bg-color classes to add a background color to the navbar. Tip: Add a white text color to all links in the navbar with the . navbar-dark class, or use the .


1 Answers

<p [style.background-color]="getStyle(hero)">

    getStyle(hero) {
        if (hero === this.selectedHero) {
            return "grey";
        } else {
            return "";
        }
    }

or

<p [style.background-color]="hero===selectedHero ? 'grey' : ''">
like image 181
Günter Zöchbauer Avatar answered Oct 07 '22 22:10

Günter Zöchbauer