Popover 'style' of undefined

Ionic Framework ionic-v3
1

Hello, when entering this line of code to my popover tells me that the style is not defined, if I remove the lines where it says stylo works perfectly but does not do any function.

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

@Component({
    templateUrl: 'popovers.html'
})
export class PopoversPage {
    background: string;
    contentEle: any;
    textEle: any;
    fontFamily;

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

    constructor(private navParams: NavParams) {

    }

    ngOnInit() {
        if (this.navParams.data) {
            this.contentEle = this.navParams.data.contentEle;
            this.textEle = this.navParams.data.textEle;

            this.background = this.getColorName(this.contentEle.style.backgroundColor);
            this.setFontFamily();
        }
    }

    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;
    }

    setFontFamily() {
        if (this.textEle.style.fontFamily) {
            this.fontFamily = this.textEle.style.fontFamily.replace(/'/g, "");
        }
    }

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

    changeFontSize(direction) {
        this.textEle.style.fontSize = direction;
    }

    changeFontFamily() {
        if (this.fontFamily) this.textEle.style.fontFamily = this.fontFamily;
    }
}
2

Since you’ve declared them as type any, I have no clue what contentEle and textEle are. What are they?

3

It is the content that is on the page where the popover is, it is assumed that this content should be modified with the options of pop…

1 Like
4

This doesn’t tell me what their type is. Please tell me they aren’t DOM elements.

5

Is the text and background found on the page where the popover is, I am doing wrong?

6

Pretend that the type any does not exist, and that you must declare a type for contentEle and textEle. What would that type be?

7

With these variables I am trying to access the text and the front panel

image
en el.PNG398Ă—689 38.4 KB

8

Can you please just answer my direct question?

9

Is it of type string, do I have to create the variable type string?

10

If they are of type string, then strings do not have style properties, so that is your problem.

1 Like
11

Of course, as he had not thought that before, as he could access the style of the element:
image

12

I really think you would benefit from taking the time to go through all the Angular docs and tutorials. Your instincts are tending to lead you down dead end roads that don’t represent idiomatic Angular style. The specific feature that I think you are trying to implement is described under the “style binding” section of the template syntax guide.

Try this example:

<div *ngFor="let fruit of fruits" [style.background-color]="bgcolor">
  {{fruit}}
</div>

<ion-select [(ngModel)]="bgcolor">
  <ion-option *ngFor="let color of bgcolors" [value]="color">{{color}}</ion-option>
</ion-select>

fruits = ['apple', 'banana', 'cherry'];
bgcolor = 'white';
bgcolors = ['white', 'yellow', 'cyan', 'pink'];

As you change the selected background color from the menu, the background color of the list of fruits should automatically change to reflect it.

1 Like