Styling the checked state of a switch in NativeScript/Angular with ngModel/FormBuilder

Let's explore the styling of a switch element within Angular:

<Switch class="switch" formControlName="answer"></Switch>

One approach involves targeting the switch with checked attribute, setting its background-color and text color accordingly. However, this method may lead to unexpected results after the initial activation.

.switch[checked=true] {
  background-color: #FE4A49;
  color: #FE4A49;
}

Alternatively, applying styles directly to the switch element can result in consistent appearance regardless of its state:

.switch {
  background-color: #FE4A49;
  color: #FE4A49;
}

So, what is the best practice for styling a switch while utilizing Angular's model bindings?

cssangularnativescriptnativescript-angular

Answer №1

Currently, I am working on designing an App and here is how I plan to style it.

CSS:

Switch#userStatus[checked=true]{
  color:#ff0048 ;
  background-color: white;
  transform: scale(1.25, 1.25); // This will adjust the size when checked
  transform: translate(-5,0); // This will help maintain the position after resizing
}

Switch#userStatus[checked=false]{
  color: gray;
  background-color: gray;
}

Below is my XML code snippet:

`<Switch id="userStatus" checked="false" />`

I trust this information proves to be useful!

Answer №2

There was an issue I encountered with a switch element

background-color

where it wasn't functioning as intended. Modifying the background-color ended up changing the entire switch (the gray section). Consequently, I had to only adjust the color attribute:

Switch[checked=true] {
    color: #f68533;
}

Answer №3

.button-unpressed {
    background-color: #FE4A49;
    color: yellow;
}

.button-pressed {
    background-color: blue;
    color: green;
}

Incorporate the following code into your design

<Button #btn pressed="false" (pressChange)="buttonStateChanged(btn.pressed)" [class]="isPressed?'button-pressed':'button-unpressed'"></Button>

Implement this code snippet in your functionality

isPressed:boolean;

 buttonStateChanged(pressed) {
        this.isPressed = pressed;
    }

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

What is causing the radio button's background color not to change after it is selected?

I've been searching and exploring various solutions, but I'm encountering some difficulties with the following scenario: There are a few restrictions: Cannot utilize Javascript or Jquery. Must be achieved using pure CSS. My objective is to chan ...

htmlcss

What is the best way to showcase several images using Sweet Alert 2?

In the process of developing my Angular 2 application, I have incorporated sweet alert 2 into certain sections. I am looking to showcase multiple images (a minimum of two) at the same time in the pop-up. Does anyone have any suggestions on how to achieve ...

angulartypescriptsweetalert2

Solution to ensure fixed header with correct z-index placement

Everything is functioning correctly, except for the issue that arises when scrolling down to view thumbnails. The left bar covers the thumbnail section, making it impossible to select items. I suspect that the z-index of a div is causing this problem. I ha ...

cssz-index

Unsubscribing from a service method in Javascript using RxJS

After clicking a button, a function is triggered to execute. The function includes an method called "executeAction" that retrieves the current view and then passes it as a parameter to another view for future reference. async executeAction(action: ...

javascriptangularrxjs

Set the CSS/HTML to make two child elements occupy 50% of the height of the parent container div

This task seems deceptively simple, yet I am struggling to find a straightforward solution. Language: (HTML) <div class="col-6-12 subcontent-outer"> <div class="subcontent"> <h1>Header</h1> ...

htmlcss

Guide on storing images in a designated folder using CodeIgniter

My code is located in view/admin_view2.php <?php echo form_open_multipart('home_admin/createBerita'); ?> <div class="form-group" > <label class="control-label">upload foto</label> <inpu ...

javascriptphphtmlcsscodeigniter

Is it possible to dynamically load a specific div when the page loads, relying on the

I am using JQuery SlideUp and slideDown methods to toggle the visibility of panels. How can I load or display the first record's contact information as a default? Currently, it loads blank because I set the panel's display property to none: < ...

javascriptjqueryhtmlcss

4 products - all discounted by 25% - featuring stylish borders and margins

After extensively searching the internet, I have come across similar issues but not quite the same as mine. I have a list that I want to display in table form within a parent div taking up the entire width (100%). I aim to show 4 items per row and attempt ...

htmlcss

Uninterrupted Horizontal Text Scrolling using Pure CSS

I am currently working on developing a news ticker that displays horizontal text in a continuous scrolling manner, without any breaks between loops. While I hope to achieve this using only CSS and HTML, I'm unsure if it's feasible. Here is my ini ...

htmlcss

What is the method for defining unassociated variables in Angular?

I am currently seeking a solution to retrieve data from the server (or JSON file) and store it in two separate variables: 'firstVariable' for manipulation purposes, and 'secondVariable' for storing the original unaltered data. However, ...

javascriptarraysjsonangularrest

Encountering a problem with the click handler when trying to log in with Google on

Currently, I am working on integrating social login with Google into my Angular project Below is the relevant HTML code for the login: <button (click)="prepareLoginButton()" #googleSignUp >Login Using Google</button> And here is the ...

angularoauthgoogle-oauth

What is the best method for showcasing two images side by side in a column layout?

I need to showcase 2 images in a row using AngularJS, with the next two images in the following row and so forth. Img1 Img2 Img3 Img4 This is my code: <section id="content"> <div class="content-wrap"> <div class="container clearfix "& ...

htmlcssangularjstwitter-bootstrap

What's up with the Twitter Bootstrap parameters?

As a beginner in the world of HTML5 and Twitter Bootstrap, I have been exploring some pre-built examples and now have a few questions... Consider this code snippet from the Fluid Layout Example: <div class="navbar navbar-fixed-top"> <div class ...

htmlcsstwitter-bootstrap

Switching ng-Idle countdown time from seconds to minutes is possible by adjusting the configuration settings

I have implemented ng-idle in my application, where the warning popup appears after 10 seconds with the message: "Your session will be close in 10 seconds" However, I need to change this to minutes. The session should be closed in 5 minutes instead. How ...

javascripthtmlcssangularjs

The module 'MatTableModule' could not be located within the '@angular/cdk/table' package during export

Having an issue with using where I'm getting the error message "export 'MatTableModule' was not found in '@angular/cdk/table'. Not sure what I might be doing wrong? You can find more details in my GitHub repository: https://githu ...

angularangular-material

Ways to configure dynamic and responsive divs using CSS exclusively (no javascript needed)!

I am looking to have my main div expand in height based on the categories div, content, or product pictures. Check out the website here Here are the issues I'm facing: The content div and categories div are both within the main div, but the produ ...

htmlcss

Why is my background image also rotating when I rotate the text using 'transform: rotate'?

I have been attempting to rotate text on a background-image, but I am facing an issue where my background image also moves with the text rotation. Can someone explain why this is happening? Below is the code snippet: HTML code snippet: <ul> <li ...

htmlrotationcss

Blockage preventing text entry in a textarea

To enhance the basic formatting capabilities of a textarea, I implemented a solution where a div overlay with the same monospace font and position is used. This approach allows for displaying the text in the div with different colors and boldness. However ...

javascripthtmlcsstextarearichtextbox

The switchMap function is sending back a single item

I'm having an issue with switching the observable using the switchMap operator: return this.db.list(`UserPlaces/${this.authData.auth.auth.currentUser.uid}`, { query: { orderByChild: 'deleted', equalTo: false } }) .ma ...

javascriptangulartypescriptfirebaserxjs

Eliminate the mystery overflow in your CSS styling

My website is experiencing overflow on the x axis, even though all vw/width properties are set to 100. I suspect that the .logout element may be causing this issue, but I'm not sure what exactly needs to be modified to resolve it. Any assistance would ...

htmlcss