Ionic 2 - set background for any specific element in a list

@Moscardini wrote:

Using Ionic 2 with Typescript.

I want to allow user to select the background color for each element of my list.

PROBLEM: How to retrieve the reference to the i-th element? Choosing any item make changing the background of the first element in the list only.

Left Image: ERROR - Right Image: EXPECTED BEHAVIOR

Image may be NSFW.
Clik here to view.

img.jpg2400x1920 248 KB

Now some code:

NOTE.HTML

<ion-content class='lista'>
    <ion-list reorder="true" (ionItemReorder)="reorderItems($event)">
        <ion-item-sliding *ngFor="let alimento of listaSpesa">
            <ion-item text-wrap class="popover-page" #popoverList> // FOR BACKGROUND
                <ion-grid>
                    <ion-row center>
                        <ion-col width-10 (click)="setPopOver($event, alimento)">
                            <ion-buttons>
                                <button dark clear disabled full>
                                    <ion-icon name="more"></ion-icon>
                                </button>
                            </ion-buttons>
                        </ion-col>
                        <ion-col width-10>
                            <img src="{{alimento.userImg}}" class="imgAlimenti" />
                        </ion-col>
                        <ion-col width-80>
                            <ion-row>{{alimento.id}} - {{alimento.id_lista}} </ion-row>
                            <ion-row><p>{{alimento.descrizione}} - </p></ion-row>
                        </ion-col>
                    </ion-row>
                </ion-grid>
            </ion-item>
        </ion-item-sliding>
    </ion-list>
</ion-content>

.CSS

.popover-page {
    ion-row,
    ion-col {
        padding: 0;
    }

    .row-dots {
        text-align: center;
        .dot {
            height: 3rem;
            width: 3rem;
            border-radius: 50%;
            margin: 10px auto;
            position: relative;
            border: 1px solid white;
        }
    }
    .dot-white { background-color: rgb(255,255,255); }
    .dot-tan { background-color: rgb(249,241,228); }
    .dot-grey { background-color: rgb(76,75,80); }
    .dot-black { background-color: rgb(0,0,0); }

    .dot.selected {
        border-width: 2px;
        border-color: #327eff;
    }
}

.TS

@Component({
  templateUrl: './build/pages/notes/notes.html'
})
export class NotesPage {
@ViewChild('popoverList', {read: ElementRef}) content: ElementRef; // FOR REFERENCE
constructor(private popoverCtrl: PopoverController){}

      setPopOver(myEvent, alimento: Alimento) { // POPOVER
            console.log('--> PopoverEditAlimento: ENTERED');
            let index = this.listaSpesa.indexOf(alimento);
            if (index > -1) {
                let popover = this.popoverCtrl.create(PopoverDetailsPicker, {contentEle: this.content.nativeElement});
                popover.onDidDismiss(val => {
                    if (val != null) {
                        console.log('SCELTA FUNZIONE:', val);
                    }
                    console.log('--> PopoverEditAlimento: CLOSED');
                });
                popover.present({
                   ev: myEvent
                });
            } else {
                console.log('PopoverEditAlimento: ERROR');
            }
      }
}

@Component({ // POPOVER DEFINITION
    template: `
    <ion-list radio-group class="popover-page">
        <ion-row class="row-dots">
            <ion-col>
                <button (click)="changeBackground('white')" category="dot" class="dot-white" [class.selected]="background == 'white'"></button>
            </ion-col>
            <ion-col>
                <button (click)="changeBackground('tan')" category="dot" class="dot-tan" [class.selected]="background == 'tan'"></button>
            </ion-col>
            <ion-col>
                <button (click)="changeBackground('grey')" category="dot" class="dot-grey" [class.selected]="background == 'grey'"></button>
            </ion-col>
            <ion-col>
                <button (click)="changeBackground('black')" category="dot" class="dot-black" [class.selected]="background == 'black'"></button>
            </ion-col>
        </ion-row>
        <button ion-item (click)="switch(0)">
            <ion-icon name="copy"></ion-icon>
            &nbsp; Cambia Titolo
        </button>
        <button ion-item (click)="switch(1)">
            <ion-icon name="clipboard"></ion-icon>
            &nbsp; Cambia Descrizione
        </button>
        <button ion-item (click)="switch(2)">
            <ion-icon name="mic"></ion-icon>
            &nbsp; Detta nuovo titolo
        </button>
    </ion-list>
    `
})
class PopoverDetailsPicker {

  background: string;
  contentEle: any;
  colors = {
    'white': {
      'bg': 'rgb(255, 255, 255)'
    },
    'tan': {
      'bg': 'rgb(249, 241, 228)'
    },
    'grey': {
      'bg': 'rgb(76, 75, 80)'
    },
    'black': {
      'bg': 'rgb(0, 0, 0)'
    },
  };

constructor(private viewCtrl: ViewController, private navParams: NavParams) {}

    ngOnInit() {
        if (this.navParams.data) {
            this.contentEle = this.navParams.data.contentEle;
            this.background = this.getColorName(this.contentEle.style.backgroundColor);
        }
    }

    getColorName(background) {
        let colorName = 'white';
        if (!background) return 'white';

        for (var key in this.colors) {
            if (this.colors[key].bg === background) {
                colorName = key;
            }
        }
        return colorName;
    }

    changeBackground(color) {
        this.background = color;
        this.contentEle.style.backgroundColor = this.colors[color].bg;
    }

    switch(scelta: number) {
        if (scelta) {
            this.viewCtrl.dismiss(scelta); // ritorno la funzione scelta dall'utente
        }
    }
}

In simple terms, my code always only references to the first element.

PS: I apologise in advance for my bad English.

For colored code: http://stackoverflow.com/questions/39163333/ionic-2-set-background-for-any-specific-element-of-a-list

Posts: 2

Participants: 1

Read full topic