How can you activate color printing in CSS when using ng-style in AngularJS?

My application generates data in a table, where each cell has a unique combination of background color and text color determined by its properties.

The code to achieve this is simple:

ng-style='{"background-color": lt.backgroundColor, "color": lt.textColor}'>

Now, I need to create a print view that only includes certain elements, but the challenge is preserving the colors – which are crucial. Typically, adding !important to the CSS rule would ensure they are printed.

This time, however, I am using ng-style to manage the colors. How can I incorporate !important within ng-style?

I attempted 

lt.backgroundColor+""+"!important"
without success,

Even trying 

ng-style='{"background-color": "#000 !important"....}
only works if I remove the !important like: 

ng-style='{"background-color": "#000"....}

By keeping only the hexadecimal code, it displays correctly in the print view.

Any solutions to this problem?

cssangularjsng-styleprint-css

Answer №1

Make sure to properly interpolate the attribute:

ng-style='{"background-color": {{lt.backgroundColor}}+' !important', "color": {{lt.textColor}} }'>

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

An effective method for binding items permanently while still being able to update the entire selection

Imagine a scenario where a list of 1000 items is displayed using infinite scrolling. Each item on the list includes a person's firstName, lastName, and mood for simplicity. Initially, I didn't want to constantly listen for updates. Fortunatel ...

javascriptangularjsperformancebindonce

Encountering typeahead provider issues when attempting to upgrade UI Bootstrap version from 0.12 to 0.13

After upgrading to ui bootstrap 0.13 to take advantage of the popover template feature, I encountered an error that reads: Unknown provider: $templateRequestProvider <- $templateRequest <- tooltipTemplateTranscludeDirective Unknown provider: $templ ...

angularjsangular-ui-bootstrapangular-ui-typeahead

Using CSS to style an alternate list elements to float

I'm working on a webpage that displays messages from a database using ajax. Currently, the output is just stacked downwards. I'm hoping to style the list elements to alternate from left to right, similar to an iOS Message chat. Does anyone have ...

htmlcss

Steps for aligning the upper rectangular text in the center of the larger rectangular border

https://i.stack.imgur.com/7yr5V.png I was aware of a particular element in html that had text positioned in the upper left corner, but my knowledge didn't go beyond that. Should I be adjusting the translation on both the X and Y axes based on the par ...

javascripthtmlcssangulartypescript

selection menu and advancement gauge

While working on my code, I have a task where I need to make the progress bar move a specific amount when a name is clicked based on the option's value. <!DOCTYPE html> <html> <head> <title>testinggg</title> &l ...

javascriptjqueryhtmlcss

Larger icon graphics

Is it possible to increase the size of Glyphicons in Twitter Bootstrap 3.0 without using the btn-lg class? I found this code that makes glyphicons big: <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-th- ...

csstwitter-bootstraptwitter-bootstrap-3glyphicons

Unable to perform 'put' operation on 'idbObjectStore' due to empty result when evaluating the object store's key path

An error has occurred in a chrome-based APP that I am currently supporting. Despite my attempts to investigate further, I have been unable to determine the cause of the error. Can someone please explain to me the potential reasons behind this issue? The e ...

angularjshtmlindexeddb

What is the rationale behind the preset margin on the <body> tag?

Throughout my years in development, I have primarily focused on front-end web UI development. One recurring issue that has always irked me is the constant need to reset default browser styling assumptions, which often slips my mind until it starts affectin ...

htmlcss

In what way can the button display the permission directly on the page?

When the website notification is granted, a green button should be displayed. If it is denied, show a red button instead. The button comes with a CSS style and a checkbox but does not have the permission to grant or allow any permissions on the page. Butt ...

javascripthtmlcss

What is the best way to navigate to the bottom of a page when new data is added?

I've created a chat feature in my Ionic app, but the issue is that when a user receives a new message while being on the chat screen, the view doesn't automatically scroll down to show the new message. The user has to manually scroll down to see ...

javascripthtmlcssfirebaseionic-framework

Utilizing both text content and a Google Maps Embed within a unified row container using Bootstrap framework

Trying to align text and an image side by side in a container while utilizing Bootstrap. Example: https://i.sstatic.net/63KZe.jpg Blue = Device screen, Black = visible container Encountering issues where the map embed shifts downward unexpectedly. htt ...

htmlcsstwitter-bootstrapbootstrap-4

Differences in CSS text padding when rendered in Firefox compared to Chrome and other web

Seeking assistance with a site issue that has been causing frustration. I have spent the entire evening trying to solve it without success. The issue at hand involves modifying tag appearance after each article on my website. The problem arises when viewi ...

cssfirefoxgoogle-chromeheight

Combining photos seamlessly and bringing them to life through animation upon window loading

My main goal is to seamlessly fit the images together, but I'm struggling to achieve this. I tried using masonry, but unfortunately it didn't work for me. All I want is to tightly pack the divs together. For instance, in my fiddle example, I woul ...

javascriptjqueryhtmlcss

Adjust the class of the iframe element when clicked

I am attempting to change the class of an iframe (soundcloud embedded track) when it is clicked, in order to apply different properties. However, my code doesn't seem to be working as expected. Here is what I have: Here is a snippet from my index.htm ...

javascriptjquerycsshtmliframe

iPhone 5s landscape mode causing issues with media query

I have been testing a media query that looks like this: @media screen and (max-width: 600px) { .blah { font-size: 1.25rem; } } When I test this in responsive mode on browser dev tools, everything looks great. I can see all the changes as I resize ...

htmlcssiphonemedia-queries

Centered offsetting with Bootstrap 4

I am looking to create a column that is centered on the page, with another column slightly offset from it, without affecting the center alignment. <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="styl ...

htmlcssbootstrap-4

Using Tailwind CSS's width property w-11/12 actually returns a full 100% width instead of the expected 91.66

It seems that the w-11/12 class is not behaving as expected. According to the documentation, it should give a width of 91.666% but instead, it's filling up 100%. This issue only occurs with the value 11, while other values work fine. Has anyone else e ...

cssreactjstailwind-css

The event.pageY position consistently reflects the laptop screen size rather than the exact position where the click occurred

My webpage is scrollable, but the event.pageY position always corresponds to my screen size. Even when scrolling down and clicking near the top of the screen, it registers as 50px. I am currently utilizing event.pageY While this functions correctly on a ...

javascriptjqueryhtmlcss

What steps can I take to bring my text more in line with my header?

How can I adjust the spacing between my small text and big text on my website? Here is a snippet of my HTML code: <div class="header"> <br> <br> <br> <br> <h1>Summi ...

htmlcssweb

Organizing an array of objects within MUI cards based on social media platforms

I'm currently developing an application that showcases athlete data in a grid layout using MUI Grid. The colored borders on the left side of each card are determined by the corresponding social network associated with that athlete. https://i.sstatic. ...

javascriptcssreactjsmaterial-uigrid