Switch up the visual design of your Angular application by changing the

Currently, I am working on developing an Angular2 application using webpack. My goal is to set different CSS themes based on the user's characteristics.

For example: When a male user logs in, I want the backgrounds to be blue; and when a female user logs in, I want the backgrounds to turn pink.

I have attempted to change the CSS values using setAttribute or style.property, but this method does not work effectively as the DOM gets destroyed when switching tabs within the application. The changes need to be somewhat permanent.

I also tried using separate CSS stylesheets (one for each theme) and connecting them to my HTML file using JavaScript when a user logs in. However, I faced an issue where webpack automatically adds my CSS to the HTML during app building.

Any suggestions or guidance would be greatly appreciated.

javascriptcssangularwebpack

Answer №1

To customize the styling in your css file, consider creating the following rules:

.is-male{
    background: blue;
}

.is-female{
    background: pink;
}

Next, within your Angular application, define a variable in the scope like $scope.userGender = 'male';

Then, apply ngClass to the body element as shown below

<body [ngClass]="{'is-male': userGender === 'male', 'is-female': userGender === 'female'}" ...

Answer №2

Exploring the :host-context Selector

The :host-context selector can be utilized to implement styles on your component based on its parent component.

styles:[`
    :host-context(.parent1) div{
      border: 1px solid blue;
    }

    :host-context(.parent2) div{
      border: 1px solid blue;
    }
  `]

This feature enables you to conditionally apply styles depending on the wrapper selector of the component.

Check out the example in Plunker

Edit:

In your scenario, the parent element would include a div with the class .boy and another one with the class .girl

You can load these containers based on a flag controlled by ngIf

Answer №3

To keep a class value permanently stored, consider utilizing localStorage. Use ngClass with a variable set to the desired theme in order to apply it.

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

Having trouble modifying a value in a form and submitting it to the following jsp page

I'm encountering an issue with changing the value in a hidden input element before submitting data to another JSP file (db.jsp) for processing. The value should be different depending on which button is clicked, but it always remains as the default va ...

javascriptjavajqueryhtmljsp

A guide on integrating array map with a v-for loop in Vue

Struggling to understand how to implement a loop within another loop in Vue? This task might seem simple with React, but Vue presents its own challenges when it comes to using loops with arrays in templates/JSX. The input data follows a specific format fr ...

javascriptvue.jsjsxv-forarray.prototype.map

What is the technique for an Angular application to lazily load an angular module from another application?

I am currently working on lazy loading an Angular module into the main Angular application from a separate application. In the main application, the routes are configured as shown below: const routes: Routes = [ { path: 'admin', loadChildren: ...

angularangular2-routing

Create a script that ensures my website can be set as the homepage on any internet browser

I am currently in search of a way to prompt users on my website to set it as their homepage. Upon clicking "Yes," I would like to execute a script that will automatically make my website the user's browser homepage. I have come across a Similar Thread ...

javascriptjqueryhtml

Dynamically adjust iframe height based on the height of its contents

Is there a way to adjust the size of an iframe based on its content? Below is the HTML code I am using: <body> <iframe id="test" src="http://www.bbc.co.uk/urdu/"></iframe> </body> And here is the jQuery code I have implemented: ...

jqueryhtmlcss

Is it possible to incorporate Django conditionals within CSS code?

I have a challenge with managing my CSS file in my Django app's static directory. I am using the same CSS file for multiple views, but I need certain elements to be customizable based on the specific page I am on. Is it feasible to incorporate Django ...

cssdjango

Tips for submitting an AJAX response using a form

Steps Taken I have implemented an ajax call to retrieve checkboxes as follows: <script> $(document).ready(function(){ $("#place").change(function(){ var id = $(this).val(); alert(id); $.ajax({ ...

javascriptphpjquerymysqlajax

Persistent column menu in ag-grid

Is there a way to include a menu for each row within a sticky column in Ag-grid? I couldn't find any information about this feature in the official documentation, so I'm unsure if it's even possible. I've attempted several methods, but ...

javascripthtmlcssag-grid

Having trouble resizing a KineticJs group to 300x300?

Attempting to adjust the size of a kinetic group is resulting in an error message in JavaScript. The Kinetic JS documentation states that setSize should work with group nodes. ...

javascripthtmlcanvaskineticjs

Get the Vue.js package from Node.js by downloading the zip file

I am having trouble downloading a zip file from nodejs using vuejs. The issue I am facing is that an odd underscore appears around the fileName when the dialog box pops up. If I manually set the fileName like this: const fileName = "xmlFile.zip"; Then t ...

javascriptnode.jsvue.js

Is it possible to use JavaScript or ajax to import an SSL certificate into a browser?

Is it possible to detect untrusted SSL certificate errors in browsers using Javascript or ajax, and automatically import them into the browser's certificate list from a URL? ...

javascriptjqueryajaxssl

Setting compilerOptions.isCustomElement for VueJS 3 in a Laravel project: A step-by-step guide

I am currently working on integrating VueJS 3 into a Laravel project and utilizing a JS file to implement a markdown toolbar. The JS file contains functions that generate buttons for applying various markdown options. Everything is functioning properly, bu ...

javascriptlaravelvue.jscompiler-errorsvuejs3

The issue with the jQuery class change not being triggered in Internet Explorer seems to be isolated, as Chrome and

This little jQuery script I have is supposed to show a fixed navigation menu once the page has been scrolled below 200px, and then change the class on each menu list item to "current" when that section reaches the top of the viewport. The issue is that th ...

javascriptjqueryhtmlcssinternet-explorer

Adding subdocument to the array of parent document, with only the Object_ID being included

I'm relatively new to working with mongoose. While I have come across similar questions that address this issue, none quite fit my specific problem or help me understand how it relates. My current task involves pushing a subdocument into an array wit ...

javascriptnode.jsmongodbexpressmongoose

Error encountered while attempting to utilize EventEmitter as an observable

I have developed a straightforward column filter component to filter values in a table. Everything works as expected, but I am encountering some issues with the event emitter's typing. The relevant excerpt from the ColumnFilterComponent: export class ...

angularangular-observable

Javascript - parsing a string to create a mathematical equation

Suppose I have an image URL structured like this: blabla.com/bla/twofive.hash.png This type of URL can be converted into a JavaScript string. I am interested in learning how to create an array that breaks down the URL based on special characters, such a ...

javascriptarraysstring

What causes the TrackballControls to behave inversely when used with anything other than a camera?

I am having an issue with the TrackballControls when applied to a sphere mesh. The controls seem to be working backwards, causing lateral dragging to move the sphere vertically and vice versa. Could someone please provide assistance on how to correct this ...

javascriptthree.js

Tips for displaying lower quality images while initially downloading higher quality versions

I need to download and display a large image in an img tag. Since the image is not Progressive JPEG, it will render as it downloads. Is there a way to show a low-resolution version of the image while it fetches from the server using only CSS or an HTML p ...

javascripthtmlcss

css: Positioning divs relative to their parent div

In my design, I want the blue div to be positioned next to the red div without affecting the yellow div's placement. http://jsfiddle.net/pCGxe/ Is there a cleaner way to achieve this layout without resorting to using position:absolute or other trick ...

csslayout

Is it possible for JavaScript/React to observe the movement of elements on the webpage?

I'm searching for a solution to detect if an element moves on the screen. Currently, I have an absolute positioned div (acting as a download overlay) that appears when a document is clicked on my website. However, I want it to disappear whenever the d ...

javascriptreactjsdomeventslistener