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>
Currently, I am utilizing the jquery animate function for animating text while also aiming to rotate the text if a specific degree is passed. In order to achieve this, I have implemented the following code snippet: var leftCss = "-"+$('#mydiv'). ...
In our table consisting of 6 rows and 2 columns, the second column displays a Font Awesome circle followed by various values in the database field (such as Outstanding, Very Good, Good, Needs Improvement, and Adequate). I am looking to dynamically change ...
I need to develop a custom toast component that includes a personalized message and class. While I have successfully passed the message as props, I am encountering difficulties in applying the bootstrap class. Component File: Toast.vue <script ...
I've been attempting to incorporate the lodash dependency into my project, but I keep encountering issues during the VS2015 build process. The error message in the build output states "Build: Cannot find module 'lodash'", causing the build t ...
I have successfully developed a simple web page using PHP and HTML. However, I am facing an issue in displaying the username after login. Additionally, I would like to hide the login and signup sections after successful login. Can anyone provide assistance ...
I am facing a challenge with two subscriptions as shown below: this.birthdays = await this.birthdaySP.getBirthdays(); this.birthdays.subscribe(groups => { const allBirthdayT = []; groups.map(c => { allBirthdayT.push({ key: c.pa ...
I am facing an issue with mouse-over highlighting on a set of list items. Below is the HTML structure I am working with: <div id="wrapper"> <div id="box"> <div class="item">Lorem ipsum dolor sit amet, sit nonumy utamur ponderum ex& ...
I'm in the process of setting up a basic layout for a single-page application using Material-ui and React. My plan is to have a sidebar on the left-hand side and a main area on the right-hand side to display information. However, I am facing two issue ...
I've been working with a Devextreme's Datatable and my goal is to dynamically configure the table using a columns configuration array. The plan is to loop through this array using an ngFor and set column tags properties dynamically. Now, the bi ...
There are multiple items generated using *ngFor: <my-item *ngFor="let item of myArray" [p]="item"></my-item> I am able to handle a click event like this: <my-item ... (click)="doWork(item)"></my-item> However, I want to avoid a ...
I am interested in incorporating an interactive Adobe Edge animation that activates upon the click of a conventional HTML form button. Could you please guide me on how to achieve this? ...
I received a JSON response structured like this: { _id: '5dd0d0dc4db1cf9c77781aaa', picture: 'http://placehold.it/32x32', name: 'Graciela Mcmahon', guid: '98c0fcc2-1dfc-4974-bdae-d8263d783e0a&ap ...
Currently, I'm in the process of developing an Angular application with Angular 4 and CLI. One of my challenges is integrating the SkyScanner search widget into a specific component. For reference, you can check out this Skyscanner Widget Example. T ...
In my Angular project, I developed a custom pipe that allows for grouping an array of objects based on a specific property: import { Pipe, PipeTransform } from '@angular/core'; @Pipe({name: 'groupBy'}) export class GroupByPipe impleme ...
Currently, I am developing a JSP project that utilizes Bootstrap for the frontend. I have come across a question regarding HTML design. Is there a way to replace one div tag with another div on the same page without navigating to a new URL using Bootstrap ...
I'm currently facing an issue with sorting two strings. The strings in question are: "2022 | Dec (V2 2022)" "2022 | Jul (V1 2022)" Although I am attempting to sort them using localeCompare, it is not yielding the correct result. T ...
Imagine this scenario: <div hidden>blah blah blah</div> If I hide the <div> element like that, can CSS be used to make it visible again? Alternatively, is there an HTML-only method to hide a <div> that can later be reversed with ...
I have a piece of HTML code where I am trying to capture the value of all selected checkboxes whenever any checkbox is checked or unchecked, triggering the (change) event. <div class="checkbox checkbox-primary" *ngFor="let category of categories; let i ...
I am working on a simple Angular application with two components. My goal is to open one component in a new tab without moving any buttons between the components. Here is an overview of my application setup: Within my AppComponent.html file, there is a b ...
Is there a method in CSS to prevent vertical scrolling and have all the contents of a div positioned next to each other so that they extend beyond the visible browser window? I would like to enable horizontal scrolling to bring them back into view. How c ...