Storage data in scss file

Ionic Framework Ionic Angular
1

Is that possible that I get value from localStorage and use it in page scss file?

Logic:

  1. I have saved name of background file in local storage and I can access it in my ts file as background
  2. Now this background variable is pointed to my local image file such as assets/bg/01.jpg
  3. I wish to use this background variable in my scss file in order to have dynamic background (in case in future i changed the value in my local storage)

Is that possible?

2

you can not use localstorage in scss file. but you can apply dynamic background by getting DOM of the div using typesctript.

3

thanks for response,
do you have any sample code that can give me the visual of your idea?

4

I think you may have inadvertently overspecified your question. It sounds like you’re really asking “is there any way that I can have things stored in Storage be reflected in styling?”, and if that’s the case, then my answer would be “yes, but not involving SCSS”. You can use Angular binding on either CSS classes or styles directly: see here.

I would strongly discourage doing what @abhayjani is suggesting. Let the framework access the DOM - that’s part of its job. Don’t manually poke around in the DOM yourself if you can avoid it.

5

Hi,
thanks for comment I tried to use this way but i’m getting ng-reflect-ng-style="[object Object]"

code

background: any;

constructor(
    //....
) {
    this.storageIonic.getItem('background').then((bg) => {
        this.background = bg.src;
        console.log('bg: ', bg);
        console.log('bg src: ', bg.src);
    }).catch(error => console.error(error));

}

HTML

<ion-content scroll-y="true" #scrollMe class="ion-padding" [ngStyle]="{'--background': background }">
 //....
</ion-centent>

But in console i am getting correct data:

bg:  Object
  active: true
  id: "03"
  name: "03.jpg"
  src: "../../../assets/bgs/03.jpg"
  __proto__: Object
bg src:  ../../../assets/bgs/03.jpg // my background variable is set to this(component code)

Any suggestion?

6

I changed my website’s theme color runtime and hope it will do the same for your image.

html {
    --background-image: url(../assets/bg/01.jpg);
    --background-color: rgba(0,0,0,.25);
}

body {
  background-color: var(--background-color);
}

app.component.ts file

initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.overlaysWebView(false);
      this.statusBar.backgroundColorByHexString('#1EACE2');
      this.splashScreen.hide();
      var html = document.getElementsByTagName('html')[0];
      html.style.setProperty("--background-color", "teal");
      html.style.setProperty("--background-image", "assets/bgs/03.jpg"); //you have to fetch that background image path here and replace it.
    });
  }
1 Like
7

Thank you, it doesn’t work on html tag for me, how can I set it on ion-content tag?

8

It’s not regrading with html or any ionic tag. You have to use that variable to set background wherever you want.

9

@hirenkorat3 fixed with this code, Thank you

this.platform.ready().then(() => {
      this.storageIonic.getItem('background').then((bg) => {
        var html = document.getElementById('myContentID');
        html.style.setProperty('--background', 'url('+ bg.src +') no-repeat 0 0');
      }).catch(error => console.error(error));
    });
1 Like