Can TypeScript variables be accessed in SCSS code within an Angular component?
I am looking to achieve the following:
<style type="text/css">
.source-status-{{ event.status.id }}::before {
border-left: 20px solid {{ event.status.color }};
}
</style>
<div class="source-status-{{ event.status.id }}">
...
</div>
Is it possible to manipulate CSS properties of a ::before pseudo element in an Angular component?
It may seem impossible at first, but SCSS is actually compiled into CSS during the app build process, which means dynamic values are not typically supported. However, there is a workaround using CSS variables. You will need to adjust how you create class names in order to make this work.
@HostBinding('attr.style')
public get cssVariables(): SafeStyle {
LOGIC TO DEFINE VARIABLE VALUE
const cssVariables = `
--my-variable: value
`;
return this.sanitizer.bypassSecurityTrustStyle(cssVariables);
}
To implement this workaround, you can add variables to the style attribute of your component like so:
.source-status-{{--you-should-think-of-static-class-names--}}::before {
border-left: 20px solid var(--my-variable);
}
I managed to find a solution. It might not be the most elegant method, but it gets the job done.
Within the .ts file:
html = '.' + event.status.id + '::after { border-left-color:' + event.status.color + ' !important; } ';
const style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = html;
document.getElementsByTagName('head')[0].appendChild(style);
Next, in the HTML file:
<div class="color-{{ event.status.id }}">
...
</div>
I'm attempting to add a border to specific list items in my HTML. I want the border to start from the 9th child and then continue every 4th child after that. For clarification, I'd like the 9th, 13th, 17th, 21st, 25th... list items to have white ...
I am seeking assistance for a task involving a circle within an hBox. I would like the color of the circle to change when the mouse cursor hovers over it. Is there a way to accomplish this using JavaFX and CSS? If not, what is the recommended approach fo ...
Currently, I am attempting to iterate through form controls in order to display fields. While the fields are being shown without any issues and properly binding values upon saving, I have encountered a problem. Whenever I press a key on these fields, the c ...
Recently, I've been exploring the use of <style jsx> in my Next.js project and encountered a scenario where I needed to style an element based on a conditional statement. Additionally, my project relies on tailwindCSS for styling: <div classN ...
I am having trouble getting my text to format properly on my web page. I have defined rules in my style sheet to center an object on the screen, but it's not working as expected. Here is the code for my web page: body { text-align: center; } h1 { ...
Seeking recommendations or guidelines for effectively segregating classes utilized for browser styling and DOM manipulation. Specifically, we are developing a single-page app using backbone.js and heavily relying on jQuery for dynamically updating page el ...
I am facing an issue with my responsive hamburger menu. It is not functioning correctly when clicked on. The menu should display the navigation links and switch icons upon clicking, but it does neither. When I remove the line "{open && NavLink ...
Take a look at this code: .gallery { display: flex; overflow-x: auto; resize: both; background-color: rgb(200, 200, 200); padding: 10px; height: 200px; } .item { display: flex; flex: 0 0 auto; max-width: 100%; } .item img { max-w ...
I'm having trouble preventing an image from resizing when I adjust the browser size. If you click on this link and try resizing your browser, you'll see what I mean - the image stays the same. I've attempted various methods but haven't ...
//My mind was completely tangled up. Everything is functioning properly, this question is inaccurate and outdated When I rotate an Element on the Y-axis and attempt to click on it, which has a bound eventListener (onClick), the event does not trigger (hov ...
In my HTML, I have a div that contains an icon and some text. I want to make it so that when I hover over the div with my mouse, only the div itself is visible to the 'elementFromPoint' function. How can I achieve this? Here is an example of th ...
I am looking to implement a feature in angular2 that is similar to marking an email as Starred. For example, when I click on the empty star icon, it will make some service calls to check if the item should be starred. If the result is true, then a new icon ...
I have utilized Angular Material to create a vertical tab, and I would like to incorporate an Add Tab button within the tab listing itself. Currently, when I add the button, it appears at the bottom of the layout instead. For reference, you can access the ...
After updating the angular website version on IIS, I am facing an issue where the old version continues to appear in the browser even after stopping the site. How can I ensure that the new version of the website is displayed correctly? I have not implemen ...
Let me show you how it currently looks: https://i.sstatic.net/OeHRg.png The maximum width of the cell is working properly, but the text is not wrapping to a new line as expected. Instead, it overflows out of the cell. Here is the CSS applied to the tabl ...
I have a webpage with a button labeled "Increase Age". Every time this button is clicked, the person's age increases. How can I ensure that once the age surpasses 10, it is displayed in bold text on a red background? This should be implemented below t ...
I am attempting to perform two HTTP requests consecutively, with the second request depending on the result of the first. However, it seems like I am overlooking something: getParkingSpots(date) { var gmt = this.getTimezone().subscribe(data=>{ if(d ...
I am facing an issue with my Bootstrap button, which currently looks like this: https://i.sstatic.net/MWHYP.png The HTML code for the button in question is as follows: <button type="button" class="btn-primary.custom-btn" data-bs-to ...
Setting up this middle div on a page presents the following situation: The Top Bar should remain sticky and stationary The Middle section should scroll as new content is added or if the user scrolls up or down The Bottom Bar sh ...
I am facing an issue with styling a child component independently from its parent. Specifically, I want to prevent the text alignment set in the parent component from affecting the child component. Despite trying different ViewEncapsulation types (Native, ...