Change background color dynamically


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">

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

      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.

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

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.

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

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?

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
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?

maybe attaching a sass (css) fits your needs like

in app.scss

    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.