How can I incorporate variables within a style tag in an Angular template?

Question

How can I incorporate variables within a style tag in an Angular template?

I'm currently working on an Angular 5 application and I need to be able to apply dynamic CSS within the style tag in the template. I've tried a few solutions but so far, none have worked.

app.component.ts

customCss : any;

constructor(){}

ngOnInit(){
   this.customCss['color'] = "red";
}

app.component.html

<div>
   <span class="custom_css">This is an Angular 5 application</span>
</div>

<style>
   .custom_css{
      color: {{customCss.color}};
   }
</style>

When I inspect the custom_css class in the browser, the style shows

.custom_css{
   color: {{customCss.color}};
}

Any assistance you can provide would be greatly appreciated.

javascript html css angular angular5

Answer 1

Answer №1

If you want to add styling dynamically in Angular 5, you can utilize the [ngStyle] directive:

<span [ngStyle]="{'color': 'blue'}">
 This is an angular 5 project
</span>

Alternatively, you can define a method in your component to apply styles like this:

<span [ngStyle]="applyCustomStyles()">
 This is an angular 5 project
</span>

Then, in your component file:

applyCustomStyles() {
    const customStyles = {'color' : 'blue'};
    return customStyles;
}

Answer 2

If you want to add styling dynamically in Angular 5, you can utilize the [ngStyle] directive:

<span [ngStyle]="{'color': 'blue'}">
 This is an angular 5 project
</span>

Alternatively, you can define a method in your component to apply styles like this:

<span [ngStyle]="applyCustomStyles()">
 This is an angular 5 project
</span>

Then, in your component file:

applyCustomStyles() {
    const customStyles = {'color' : 'blue'};
    return customStyles;
}

Answer 3

Answer №2

Just a tip, if you want to apply the color using Angular's style binding, do it this way:

<div [style.color]="color"></div>

where color='var(--cssValue)' it won't work correctly!

Instead, use the following syntax for it to work properly:

<div [ngStyle]="{color: color}"></div>

Answer 4

Just a tip, if you want to apply the color using Angular's style binding, do it this way:

<div [style.color]="color"></div>

where color='var(--cssValue)' it won't work correctly!

Instead, use the following syntax for it to work properly:

<div [ngStyle]="{color: color}"></div>

Answer 5

Answer №3

If you only have a few elements to modify within a component, the provided solution will suffice. However, if you require a complete overhaul of your app's appearance based on user selection in real-time, I have discovered a method involving CSS overrides in JavaScript as shown below:

this.stylesService.get().subscribe(({ customStyles }) => {
     const style = document.createElement('style');
     style.innerHTML = 
     `.picture {
         background-image: url(${customStyles.backgroundUrl});
     }
     h1, h2 {
         color: ${customStyles.primaryColor};
     }`;

     document.body.appendChild(style);
});

Answer 6

If you only have a few elements to modify within a component, the provided solution will suffice. However, if you require a complete overhaul of your app's appearance based on user selection in real-time, I have discovered a method involving CSS overrides in JavaScript as shown below:

this.stylesService.get().subscribe(({ customStyles }) => {
     const style = document.createElement('style');
     style.innerHTML = 
     `.picture {
         background-image: url(${customStyles.backgroundUrl});
     }
     h1, h2 {
         color: ${customStyles.primaryColor};
     }`;

     document.body.appendChild(style);
});

Answer 7

Answer №4

By employing the directive [style.customClass]=“methodInComponent()”...

The specified class will be applied when the component's method evaluates to true.

Answer 8

By employing the directive [style.customClass]=“methodInComponent()”...

The specified class will be applied when the component's method evaluates to true.

How can I incorporate variables within a style tag in an Angular template?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

JavaScript code for iframe auto resizing is not functioning properly on Firefox browser

Exciting Angular feature: Dynamic Titles

Crafting a Visual Storybook with Express.js

Is it possible to create a subclass component to customize the event handler?

Styling CSS: Create circular images with dynamic text positioning or resizing on screens larger than 768px

Angular 4 router is being implemented for drag and drop functionality by ng-dragula with the

Creating a loading spinner in Angular 2 for observables using the async operator

Using both an API key and password for authentication in request-promise access

Timeout error of 10000ms occurred while using await with Promise.all in Mocha unit tests

What could be causing my line-clamp to malfunction when using a fixed height in the Safari browser?

Aligning multiple items to the right using Flexbox

What is the best way to retrieve the state value from one component and pass it to a separate function (not a component) in a different file

What is the process for including a class along with a data attribute?

Using Javascript/JQuery to attach a javascript object to a form in order to perform a traditional form

Randomly choose one of 5 pages and insert an HTML element at different intervals using JavaScript, jQuery, MySQL, or PHP

Adjusting the hue of each fifth div

jQuery enigma - struggling to get slideUp/slideDown to function

Scheduling a cron job to run at a particular date and time

How can I dynamically update HTML content in React upon receiving an AJAX response?

Recording the instance but unable to track the specific attributes associated with the object