Change background color dynamically

Ionic Framework ionic-v3
1

Hello,

I want to change the background color from the ion-content of all pages over a custom selection.
So I use in each defined page

<ion-content id="myContent" #myContent class="myContent" padding scroll="true">
</ion-content>

In the page where I want to change the background color, I make this.


  alert.addButton({
      handler: color=> {
        this.chosenColor= this.colors.find(myColor=> myColor.key=== color);
        let el = this.customBody.nativeElement;
      }
    });

The el is undefined, in which I want to change the background color from myBody.

Please help.

2

Did you try searching the forums? One would think you would have come across at least some of these threads.

3

Hello,
there is maybe something missing. Your code don’t show how custombody is defined, how you grab it and when you grab it. For exampe, I hope it is correct, variable grabed with @Viewchild is avaialbe from ngAfterViewInit and later .

Best regards, anna-liebt.

4

The correct answers should be “nowhere, I don’t, and never”. This should be done using property binding, not direct DOM manipulation.

5

Right, I should write it with a water resitence marker direct on the screen, In big letters. It seem it needs time for me thinking angular.

Best regards, anna-liebt

Ps: Have you maybe an idea, why (swipe)=‘swipeEvent($event)’ isn’t working with emulated touch or touch on device?

6

In ion-content I cannot use something like this [color] like in a ion-button.
So what I do and It works, I use
@ViewChild(Content) content: Content;
and change background color like
this.content.setElementStyle("background-color","black")
But this only change the color of the current page. But I have more than one page.
So how I can change the background color of all pages?

7

Hello,
maybe attaching a sass (css) fits your needs like

in app.scss

.mycontent{
    background-color: yellow;
}

and in ts

<ion-content padding class='mycontent' >

Hope it helps, anna-liebt

PS. Maybe if you want style your app darker, maybe a dark theme fits your needs better.