Adjust the CSS styling of an element in real-time

I am trying to dynamically set the background image for the ion-content element. How can I achieve this? If it were a CSS class, I could simply use [class]="cssClassName" and change the class name in the TypeScript file. But in this case, how can I accomplish that?

.ts

ngOnInit() { this.initialize(); }

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

.html

<ion-content>

</ion-content>

.scss

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

}
htmlcssangulartypescriptionic4

Answer №1

To achieve different backgrounds, you can create two separate CSS classes with the desired styles. Use a class variable to store the class name that you can switch in the init method and bind it to the ion-content component.

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

Answer №2

To apply conditional classes in Angular, use the syntax 

[class.<YOUR_CLASS_NAME>] = "<SOME CONDITION>"
. You can find more information about this topic in this answered thread.

For further reference, check out this resource on Stack Overflow: Angular: conditional class with *ngClass

Answer №3

Here is how I managed to accomplish it:

Note: A crucial aspect to note is the presence of 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>

Answer №4

Here is a potential solution:

$(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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS background images struggle to display properly in Safari, often not appearing even when checked in the debugger

I'm currently working on a website that I want to make responsive. I have set up a div ID that is supposed to appear once the width of a mobile device reaches a certain point. Here is the CSS code: #mobilenavbuttons1 { max-width: 750px; padding-top: ...

csssafaribackground-imagebackground-color

Having difficulty transforming both scale and box-shadow at the same time

Is there a way to animate the circle's box-shadow while also scaling it down from 1.6x to 1 during the same transition period? I'm having trouble with the timing of the scale animation, as it seems to occur after the box-shadow animation is fini ...

htmlcsscss-animationscss-transformsbox-shadow

Ensure Focus Retention Upon Clicking Inside Iframe with li a:focus

How can I prevent my ul.SideNav_Main li a:focus class from losing focus when I click on the iframe or elsewhere on the page? Shouldn't it maintain focus until I click on another URL in the list? Is it possible to solve this issue with just CSS, or wo ...

javascripthtmlcss

Placing an icon and a title on the same baseline

I'm working on a new website design and I really like the layout shown in this image: https://i.stack.imgur.com/QuVRZ.png I've been struggling to align the icon with the title in a responsive manner. Here are some of the approaches I've att ...

htmlcss

Tips on switching the default camera with ngx-scanner-qrcode library in Angular

In my current project, I am utilizing the ngx-sanner-qrcode library for QRCode scanning. However, I am interested in changing the default camera from front to back in order to enhance the user experience. I assumed that I could change the default camera b ...

angularqr-code

What is the best way to implement a dispatch function in TypeScript?

Despite my expectations, this code does not pass typechecking. Is there a way to ensure it is well typed in Typescript? const hh = { a: (_: { type: 'a' }) => '', b: (_: { type: 'b' }) => '', } as const; ex ...

typescript

Set a consistent pixel measurement for all images

I am working on a project where I have an image of a card that needs to be repeated 30 times. Each time the card is repeated, I want it to overlap with the previous card in a specific position, resembling a deck of cards. The issue I am facing is that whe ...

htmlcssvue.js

Removing HTML tags from a string while preserving specific tags in JavaScript

Here is a JavaScript string that I am working with: var test = "<p>test</p> FOLER.PRODUCTS<12345><level-2>"; I'm trying to remove the HTML tags from the string because the service I'm using doesn't accept them. Here ...

javascripthtml

Getting the height of a group of classes using the style attribute

How can I retrieve the current height of 813px in jQuery from the "style" section? An example of F12 CSS is shown here: https://i.sstatic.net/4wFfR.jpg My attempt at achieving this is as follows: function HandleAccordionControlSizeChanges(isOpened) { ...

jquerycss

What is the best way to responsively center an after pseudo-element above its parent?

Looking to create a dynamic tooltip without any fixed widths or constraints on the parent element. The process seems simple enough, but I'm facing an issue with centering the after element due to an existing transform attribute of transform: translat ...

cssvue.jssasspseudo-element

It appears that the crackling noise is being generated by AudioContext.decodeAudioData

I am currently in the process of developing an electron app that enables users to cut and rearrange multiple audio samples while seamlessly playing them back. The combined duration of these samples can exceed an hour, making it impossible to decode and sto ...

javascripttypescriptweb-audio-api

Is it possible to utilize viewport height as a trigger for classes in Gatsby?

Unique Case Working on a Gatsby site with Tailwind CSS has brought to light an interesting challenge regarding different types of content. While the blog pages fill the entire viewport and offer scrolling options for overflowing content, other pages with ...

javascriptcssreactjsgatsbytailwind-css

The function Interceptor.intercept is not defined

For a while now, I've been working on implementing an application-wide interceptor. However, no matter what I do, I keep encountering the same frustrating error: TypeError: this.interceptor.intercept is not a function After countless hours of debugg ...

angularangular5

The elegant scroll-bar (whether directive-based or not) seems to be having trouble functioning within the ng-view

I am looking to add a stylish scroll bar to a paragraph that is located within the ng-view. My module code appears as follows: var myweb = angular.module('myweb' , ['ngRoute', 'perfect_scrollbar']); myweb.config(function($ro ...

javascripthtmlangularjsperfect-scrollbar

Managing and keeping track of a universal value within the success callback function among numerous Ajax POST requests

I am faced with a challenge involving two HTML elements: 1). a div element that functions as a multiple select, created automatically by a predefined widget, and 2). a button that triggers an onclick event. On the JavaScript side, I have a global variable ...

javascripthtmljqueryajax

Troubleshooting Karma: Dealing with layout issues in Angular 6 and jQuery

Currently, I am implementing a workaround using JQuery to fix a visual bug in a library that I am working with. Everything was going smoothly until I started preparing for a tested version and encountered an error. Within my component, the code looks like ...

jqueryangularangular-clikarma-jasmineangular-test

What is the best way to shorten text in React/CSS or Material UI based on the line height multiples?

I'm facing an issue with creating a Material UI card that contains text. My goal is to set a fixed height for the card and truncate the text if it exceeds 3 lines. Can anyone suggest the best approach to achieve this? Here's the code snippet I&a ...

javascriptcssreactjsmaterial-ui

Troubleshooting head.js and jQuery problems in Chrome/Firefox 5

After rendering the page, it looks something like this: <!DOCTYPE html> <html> <head> <script> head.js("js/jquery.js", "js/jquery.autocomplete.js"); </script> </head> <body> ... content ...

javascriptjqueryhtmldocumenthead.js

Overriding the w-4xl with sm:text-2xl in Tailwind CSS

Struggling to achieve responsive design on my Pages, especially with changing text size when the screen is small. I've been following all the correct steps and maintaining the right order. However, whenever I set 'sm', it seems to override a ...

javascriptcssreactjsnode.jstailwind-css

Creating asynchronous JavaScript constructors using a static method called "create" presents challenges when dealing with TypeScript types

I've been diving into the world of asynchronous constructors and have successfully implemented them in JavaScript. However, I'm facing a challenge with TypeScript types. Here's how it should ideally work: const a: AnyClass = await AnyClass. ...

javascripttypescript