Change element css property dynamically

Question

I need to dynamically set the background image. Since ion-content is an element how can I do that? If it is a css class then I can do like so

[class]="cssClassName" and I can change the class name inside the ts file. But here how can I do that?

.ts

ngOnInit() { this.init(); }

init() {
    switch (environment.hotelEnvironment.hotelName) {
      case "com1":
       // has back ground
        break;
      case "com2":
       //no back ground
        break;
      default:
    }
  }

.html

<ion-content>

</ion-content>

.scss

ion-content {
    --background: url('/assets/img/com/background/background.png') no-repeat 100% 100%;

}

how are you going to trigger your init () function – DCR May 05 '19 at 20:17 — DCR, May 05 '19 at 20:17
It runs here `ngOnInit() { this.init(); }` @DCR – Sampath May 05 '19 at 20:18 — Sampath, May 05 '19 at 20:18

score 1 · Accepted Answer · edited May 05 '19 at 22:16

1

You can have two different css classes with the desired backgrounds. Having a class variable to hold the class name that you switch in your init method and binding it to the ion-content component should do it.

<ion-content [ngClass]="hotelBackground">
  ...
</ion-content>

ngOnInit() { this.init(); }
hotelBackground: string;
init() {
    switch (environment.hotelEnvironment.hotelName) {
      case "com1":
       this.hotelBackground = 'com1';
       break;
      case "com2":
       this.hotelBackground = 'com2';
       break;
      default:
    }
  }

.scss

.com1 {background: url('/assets/img/com/background/background.png') no-repeat 100% 100%; } 

.com2{ background: none}

edited May 05 '19 at 22:16

Sampath

63,341
64
307
441

answered May 05 '19 at 20:59

talhature

2,246
1
14
28

Can you tell me how to do the `.scss` part? code for that? – Sampath May 05 '19 at 21:04
This is the current code `ion-content { --background: url('/assets/img/com/background/background.png') no-repeat 100% 100%; }` – Sampath May 05 '19 at 21:05
.com1 {background: url('/assets/img/com/background/background.png') no-repeat 100% 100%; } .com2{ background: none} – talhature May 05 '19 at 22:07

score 1 · Answer 2 · answered May 05 '19 at 21:05

1

use [class.<YOUR_CLASS_NAME>] = "<SOME CONDITION>" See this its answered here

Angular: conditional class with *ngClass for reference

answered May 05 '19 at 21:05

saitama

699
1
9
21

Then how to handle this? `ion-content { --background: url('/assets/img/com/background/background.png') no-repeat 100% 100%; }` – Sampath May 05 '19 at 21:07
with `css` you can't change the background dynamically you have to do it in your `ts` file – saitama May 05 '19 at 21:14
How to do that? – Sampath May 05 '19 at 21:16
first get the `image src` dynamically and store it in a local variable and then use that in you html template – saitama May 05 '19 at 21:21
[see this](https://stackoverflow.com/questions/46117989/what-is-the-recommended-way-to-dynamically-set-background-image-in-angular-4) and do some research before asking a question – saitama May 05 '19 at 21:22
See how I have achieved it in a cleaner way: https://stackoverflow.com/a/55996610/1077309 – Sampath May 05 '19 at 21:34

Sampath · Answer 3 · 2019-05-05T21:40:20.513

I have achieved it like so:

Note: Very important part here is this ion-content.background-image

.scss

ion-content.background-image {
    --background: url('/assets/img/com/background/background.png') no-repeat 100% 100%;       
}

.ts

ngOnInit() { this.init(); }

init() {
    switch (environment.hotelEnvironment.hotelName) {
      case "com1":
        this.cssClassName = "";
        break;
      case "com2":
        this.cssClassName = "background-image";
        break;
      default:
    }
  }

.html

 <ion-content [ngClass]="cssClassName">

    </ion-content>

score -1 · Answer 4 · answered May 05 '19 at 20:29

-1

something like this might work:

$(document).ready(function() {
  $("button").click(function() {
    $(".content1").toggleClass("active");
  });
});

.content1.active {
  background-image: url('../images/light.png');
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Clicky</button>
<div class="content1"> Hello </div>

answered May 05 '19 at 20:29

DCR

14,737
12
52
115

I'm not using `jQuery` at all. This is `Angular only` app. – Sampath May 05 '19 at 20:32

Change element css property dynamically

4 Answers4