Styling for 'checked' state within an ngFor iteration

Each checkbox in my list is assigned to a different department, with each department having its own color. When a box is unchecked, only the border is in the color of the department. When checked, the background changes to the assigned color https://i.sstatic.net/RBTIk.png

The box-shadow works as expected, but I am unable to make the background change (it stays blue-ish). Here is my current code:

<label class="custom-control custom-checkbox" *ngFor="let department of departments">
    <input type="checkbox" class="custom-control-input" [ngStyle]="{'background-color':checked===true? department.color:'white'}">
    <span class="custom-control-indicator" [ngStyle]="{'box-shadow': '0 0 1px 1px' + department.color}"></span>
    <span class="custom-control-description text-capitalize">{{department.id}}</span>
</label>
htmlcssangularbootstrap-4

Answer №1

Angular is not involved in this scenario. The native checkbox background color cannot be altered directly. A custom class with pseudo elements like :before and :after can be used to modify the look of checkboxes and radio buttons.

You can find an illustration here

Answer №2

After some exploration, I managed to find a solution that does not rely on :before or :after pseudo-elements, making it less complicated for those seeking an alternative approach:

 <label class="custom-control custom-checkbox" *ngFor="let department of departments">
        <input type="checkbox" class="custom-control-input" (click)=gotChecked($event,customBox,department.color)>

        <span class="custom-control-indicator" [ngStyle]="{'box-shadow': '0 0 1px 1px' + department.color}" >  </span>
        <span class="custom-control-indicator" #customBox></span>
        <span class="custom-control-description text-capitalize">{{department.id}}</span>
      </label>

In addition:

gotChecked($event: Event, customBox: HTMLSpanElement, color: string) {
let isChecked = (<HTMLInputElement>event.target).checked
console.log(isChecked)
if (isChecked) {
  customBox.style.backgroundColor = color
} else {
  customBox.style.backgroundColor = 'transparent'
}

}

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

Execute the JS function during the first instance of window scrolling

Currently, I have implemented a typewriter effect on my website that triggers when the user scrolls to a specific section. However, I want this effect to occur only once. Unfortunately, every time the user scrolls again (in any direction), the function is ...

javascriptjquerycssfunction

Having trouble understanding how to display an HTML file using Next.JS?

Currently, I am working on a project that involves utilizing Next.JS to develop a webpage. The main goal is to display a PDF file on the left side of the screen while integrating Chaindesk on the right side to create a chat bot capable of extracting inform ...

javascripthtmlreactjsnext.jschatbot

The submit option fails to appear on the screen in the JsonForm library

I've been using the JsonForm library ( https://github.com/jsonform/jsonform ) to define a form in HTML. I have set up the schema and form of the JsonForm structure, but for some reason, the "onSubmit" function that should enable the send button is not ...

javascripthtmljson

Divs appearing consistently across both mobile and desktop platforms

I'm having trouble getting two divs to display in the same row on desktop and stacked on top of each other in the mobile view. However, they are currently appearing in the same row on both desktop and mobile views. Additionally, when I try to use col- ...

htmlmobilebootstrap-4desktop

Designing a hierarchical HTML dropdown menu for choosing an XML file for parsing using a jQuery script

I have successfully created a question and answer framework using Jquery and XML files. Users can choose a specific category of questions from a drop-down menu, which then displays the corresponding questions and answers from the selected XML file. While ...

jqueryhtml

Conceal the rating of WordPress products when they have no ratings

I am looking to remove the star ratings under the title for products with empty reviews. I specifically want to hide the stars without allowing users to leave a new review. I found a similar solution for hiding a different element and attempted to customiz ...

javascriptphpcsswordpress

When scrolling, the menu is being overlapped by the Carousel in HTML5, CSS3, and

I am currently working on a One Page HTML webpage that needs to be responsive, and the requirement is to use Bootstrap. I have gone through all the tags but can't seem to identify the issue. One problem I encountered is that when I scroll down the pa ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

How do I submit an array of objects in Laravel?

I am currently working with a dynamic table that allows users to add and delete rows. Each row contains input fields where users can enter data for an object. At the moment, I am manually assigning index numbers to the name attribute like this: <input ...

htmlarrayslaravelformslaravel-blade

Passing a click event to a reusable component in Angular 2 for enhanced functionality

I am currently working on abstracting out a table that is used by several components. While most of my dynamic table population needs have been met, I am facing a challenge with making the rows clickable in one instance of the table. Previously, I simply ...

javascripthtmlangulartypescriptevent-handling

Issue with Ionic 4 button not triggering event when created using Jquery

Utilizing Ionic 4 in my current project, I have integrated it with Jquery. On the HTML page, a button is created using the following code: <ion-button (click)="event1()">EVENT1 </ion-button> In the .ts file for the page, a function is impleme ...

javascriptjqueryangularionic-framework

The post button isn't appearing on my feed

I recently added a like button to my website, but when I click to publish, the post does not appear on my Wall. Can anyone help me figure out why this is happening? Here is the HTML code for my button: <div class="fb-like" data-send="false" data-layout ...

javascripthtmlfacebookfacebook-like

Enhancing ES6 capabilities with Angular polyfills

While exploring the Angular documentation and various online resources about Angular, I came across a question. If all code is written in Typescript, why would we need ES6 polyfills? My understanding is that webpack eventually transpiles the code to ES5, s ...

angulartypescriptecmascript-6

CSS selectors can be used to alter the styling of the container surrounding the text

My current content includes: <span> Hello </span> I am looking to apply CSS selectors to either replace or enclose the text inside the element with an <h1> Is it doable using only CSS selectors? ...

htmlcss

The smooth transition of my collapsible item is compromised when closing, causing the bottom border to abruptly jump to the top

Recently, I implemented a collapsible feature using React and it's functioning well. However, one issue I encountered is that when the collapsible div closes, it doesn't smoothly collapse with the border bottom moving up as smoothly as it opens. ...

javascriptcssreactjssassstyled-components

The Ultimate Guide to HTML Scrolling Default Pages

I found a JSFiddle link to help me create a sliding page content: http://jsfiddle.net/sg3s/rs2QK/ Although I'm quite pleased with it, I am trying to make the first target show up by default. I attempted to replace the panel class of the first target ...

jqueryhtml

How can I position text below a ticked checkbox?

Having an issue with my HTML and jQuery code. Everything is working fine, but when I click on a checkbox, the text "FINISHED" appears below all checkboxes instead of just the one I clicked on. This is my html code: $('.label__checkbox').cli ...

javascriptjqueryhtml

The width of the absolute div shrinks to such an extent that the text starts wrapping around itself

My goal is to create a button that, when hovered over, displays a div. However, I am encountering challenges with the width and position of this div. The issue is illustrated in the images below and in the accompanying jsfiddle. When I set the positioning ...

htmlcsswidthcss-position

Implementing Angular 4, modifying the display to reflect changes in the latest model

Hey, I'm having some trouble with a component called 'updateUserInfo'. When I call it from a service, the value in the view doesn't change. Can someone assist me with this, please? @Component({ selector: 'app-menu', t ...

angular

Storing HTML in a Database

I've encountered an issue while attempting to parse through an HTML file that consists solely of tags. I wrote a function to extract the content between these tags, and while I'm able to display it on the page without any problems, inserting th ...

phphtml

Steps for initiating an Angular 4 project

While most developers have moved on to Angular 5, I was tasked with creating a project using Angular 4. After conducting research for several days, I discovered that downgrading the Angular CLI would allow me to accomplish this. By following this approach, ...

node.jsangulartypescriptnpm