Tips for incorporating CSS 4 custom properties into Angular components

Exploring the new possibilities of CSS 4 with custom properties, my goal is to utilize them in Angular.

Traditionally, custom properties are used in the following manner:

<div style="--custom:red;">
    <div style="background-color: var(--custom);">
        hello
    </div>
</div>

However, when attempting to bind custom properties using Angular's mechanism, the desired red rectangle is not achieved:

<div [style.--custom]="'red'">
    <div style="background-color: var(--custom);">
        hello
    </div>
</div>

So the question arises - how can custom properties be successfully bound in Angular?

cssangular

Answer №1

Binding may not be straightforward at the moment, but there is a workaround available. Since custom properties inherit cascading effects, you can define the property within your component and utilize it elsewhere within the component.

constructor(
  private elementRef: ElementRef
) { }

ngOnInit() {
  this.elementRef.nativeElement.style.setProperty('--custom', 'red');
}

I found this solution here https://github.com/angular/angular/issues/9343#issuecomment-312035896, although the renderer method did not work for me.

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

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

Using Bootstrap for Angular 10 Modal with Data Binding

I've come across an interesting concept in Angular that involves using @Input() to delve into nested components and then back out with @Output() events. It's a great idea, but why am I encountering two-way binding in my specific scenario? Any in ...

angularbootstrap-modaltwo-way-binding

Having difficulty subscribing to multiple observables simultaneously using withLatestFrom

I am facing an issue where I have three observables and need to pass their values to a service as parameters. I attempted to do this using WithLatestFrom(), but it works fine only when all values are observables. this.payment$.pipe( withLatestFrom(this.fir ...

angulartypescriptrxjs

When using `JSON.stringify`, the resulting data may vary from the original object

Here is the code snippet in question: console.log("444444: ", profile, JSON.stringify(profile)) Upon checking the log output: https://i.stack.imgur.com/LzalV.png I am trying to understand why I cannot see the value: [0] present Additionally, ...

javascriptangulartypescript

Angular: Dynamically changing checkbox's status from parent

I'm in the process of developing a switcher component that can be reused. The key requirement is that the state of the switch should only change after an API call is made at the parent component level. If the API call is successful, then the state cha ...

javascriptangularcheckbox

Designing a responsive navigation bar with slide functionality for both web and mobile interfaces utilizing Bootstrap

I have integrated Bootstrap 4.5.0 with the necessary CSS and script from the CDN on my webpage. I am attempting to create a responsive navigation bar header similar to the one on the Bootstrap website, which functions effectively on both desktop web browse ...

htmlcsstwitter-bootstrapbootstrap-4header

Securing Your Angular 2 / ASP.NET MVC Application from CSRF Attacks

I am currently developing a single-page application using ASP.NET MVC for the backend and Angular 2 for the frontend. To prevent cross-site request forgery attacks in my application, I have implemented the following steps: Since ASP.NET MVC sends a co ...

asp.net-mvcangularcsrf-protection

Manipulating CSS animations through JQuery

Currently, my animation is triggered by a :hover event. However, I would like to change it so that the animation starts when a button is clicked. Can someone guide me on how to manipulate the CSS using JQuery? //CSS .mouth{ top: 268px; left: 273px; ...

javascriptjquerycss

Utilize the text box feature for manipulating the data field in Angular4

Within my grid view, there exists a column labeled remark. This specific field contains various values, one of which is absence. My objective is to modify the remark value exclusively when it is equal to absence, followed by clicking the corresponding icon ...

htmlangulartypescript

Utilizing Angular and ASP .Net Web Api in conjunction with Plesk hosting platform

I have successfully created a website using Angular and .NET Framework 5.0. I was able to publish the Angular portion on Plesk and it is working correctly, but I am facing challenges in publishing the .NET Framework app and connecting it with Angular. ...

c#asp.netangularplesk

Anchor validation across various spans

Here is the HTML code snippet I am working with: <p class="main-text"> <span>Lorem Ipsum</span> <span>Lorem Ipsum</span> <span>Lorem Ipsum</span> <span>Lorem Ipsum</span> ...

htmlcss

Creating or deleting multiple batches of entries in Firebase Realtime Database

I am currently utilizing Firebase real time database in the following way: createSoldLead(soldLead: SoldLeadModel): void { const soldLeadsReference = this.angularFireDatabase.list<SoldLeadModel>( `groups/${this.groupId}/soldLeads` ); ...

angulartypescriptfirebasefirebase-realtime-databaseangularfire

Unable to Access Camera in Angular5 Instascan: <video> Issue

Having Trouble Displaying Camera View with Angular5 and Instascan, Despite Camera Being On app.component.ts constructor(){ this.Instascan= require('instascan'); let scanner = new this.Instascan.Scanner({ video: document.getElementById("pr ...

javascripthtmlangulartypescript

Error message "Property 'name' does not exist on type '{}'" is encountered when using Ionic/Angular HttpClient and no data type is specified

While working on my Ionic project, I encountered an error in Angular when trying to fetch data from an API using HttpClient. The error message that popped up was 'Property 'name' does not exist on type '{}'.'. Below is the cod ...

javascriptangulartypescriptionic-frameworkionic2

Encountering issues when verifying the ID of Angular route parameters due to potential null or undefined strings

Imagine going to a component at the URL localhost:4200/myComponent/id. The ID, no matter what it is, will show up as a string in the component view. The following code snippet retrieves the ID parameter from the previous component ([routerLink]="['/m ...

angulartypescriptexception

Navigating with Angular 2 using separate modules but sharing the same routing

What if I have two main routes, both loading the same child module? Is it possible to have two routes with the same name on the child module that load two different components based on the main route? Main Routes: export const ROUTES: Routes = [{ pat ...

angularangular2-routing

Angular 2 and Strophe XMPP Integration

I am currently looking to develop a service for the Strophe.JS XMPP library within an Angular2 project. This service will handle the opening and closing of connections, as well as include a message handler. I have successfully implemented this in a .Net MV ...

angularstrophe

The disabled attribute appears to be ineffective in an Angular reactive form

In my Angular reactive form, I have an email field that I want to disable when the form is in edit mode instead of add mode. The code I am using for this is: disabled: typeof user.user_id === 'string' When I debug the modelToForm method and che ...

angulartypescriptangular-reactive-forms

The issue with hiding elements using .setAttribute in HTML/CSS is not occurring as expected

function showEditStudentProfile() { document.getElementById('editstudentprofile').setAttribute('class', 'unhide'); document.getElementById('profile_viewStudent').setAttribute('class', ' ...

htmlcss

Why can't we use percentages to change the max-height property in JavaScript?

I am currently working on creating a responsive menu featuring a hamburger icon. My goal is to have the menu list slide in and out without using jQuery, but instead relying purely on JavaScript. HTML : <div id="animation"> </div> <button ...

javascripthtmlcss