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
– DCR

2019-05-05 20:17:16 +00:00
Commented May 5, 2019 at 20:17 — DCR
– DCR, Commented May 5, 2019 at 20:17
It runs here ngOnInit() { this.init(); } @DCR

Sampath
– Sampath

2019-05-05 20:18:14 +00:00
Commented May 5, 2019 at 20:18 — Sampath
– Sampath, Commented May 5, 2019 at 20:18

Sampath · Accepted Answer · 2019-05-05 22:16:45Z

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 5, 2019 at 22:16

Sampath

66.2k70 gold badges329 silver badges462 bronze badges

answered May 5, 2019 at 20:59

talhature

2,1851 gold badge17 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sampath Over a year ago

Can you tell me how to do the .scss part? code for that?

Sampath Over a year ago

This is the current code ion-content { --background: url('/assets/img/com/background/background.png') no-repeat 100% 100%; }

talhature Over a year ago

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

Levi · Accepted Answer · 2019-05-05 21:05:20Z

1

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

Angular: conditional class with *ngClass for reference

answered May 5, 2019 at 21:05

Levi

8891 gold badge10 silver badges25 bronze badges

6 Comments

Sampath Over a year ago

Then how to handle this? ion-content { --background: url('/assets/img/com/background/background.png') no-repeat 100% 100%; }

Levi Over a year ago

with css you can't change the background dynamically you have to do it in your ts file

Sampath Over a year ago

How to do that?

Levi Over a year ago

first get the image src dynamically and store it in a local variable and then use that in you html template

Levi Over a year ago

see this and do some research before asking a question

|

Sampath · Accepted Answer · 2019-05-05 21:40:20Z

0

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>

edited May 5, 2019 at 21:40

answered May 5, 2019 at 21:33

Sampath

66.2k70 gold badges329 silver badges462 bronze badges

Comments

DCR · Accepted Answer · 2019-05-05 20:29:18Z

-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 5, 2019 at 20:29

DCR

15.8k13 gold badges61 silver badges131 bronze badges

1 Comment

Sampath Over a year ago

I'm not using jQuery at all. This is Angular only app.

Collectives™ on Stack Overflow

Change element css property dynamically

4 Answers 4

3 Comments

6 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

6 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related