Personalize your classes in angular 8

I am looking to dynamically create classes with specific background colors fetched from a bank. Is there a way to achieve this in Angular? I have heard that @ViewChildren might be helpful in achieving this.

These classes will be generated based on data retrieved from the database, where each class will correspond to a person's name and their designated background color. It is crucial that the CSS styling reflects this when rendering my component.

.schedule-group-custom-work-days.e-schedule .e-month-view .e-work-days.eduard,
.schedule-group-custom-work-days.e-schedule .e-vertical-view .e-work-hours.eduard {
    background-color: rgba(0, 139, 139, 0.26);
}

.schedule-group-custom-work-days.e-schedule .e-month-view .e-work-days.alice,
.schedule-group-custom-work-days.e-schedule .e-vertical-view .e-work-hours.alice {
    background-color: #deecfc;
}

.schedule-group-custom-work-days.e-schedule .e-month-view .e-work-days.roger,
.schedule-group-custom-work-days.e-schedule .e-vertical-view .e-work-hours.roger {
    background-color: rgba(210, 105, 30, 0.39);
}
angulartypescriptsass

Answer №1

If you want to add custom CSS to your document dynamically using Angular, you can utilize the Renderer2 to create a style tag element. Simply insert your customized CSS within this element from your component and then inject it into the document body:

constructor(private renderer2: Renderer2) {
let myCustomCss = `.schedule-group-custom-work-days.e-schedule .e-month-view .e-work-days.eduard,
                      .schedule-group-custom-work-days.e-schedule .e-vertical-view .e-work-hours.eduard {
                            background-color: rgba(0, 139, 139, 0.26);
                      }

                  .schedule-group-custom-work-days.e-schedule .e-month-view .e-work-days.alice,
                   .schedule-group-custom-work-days.e-schedule .e-vertical-view .e-work-hours.alice {
                          background-color: #deecfc;
                    }

                    .schedule-group-custom-work-days.e-schedule .e-month-view .e-work-days.roger,
                    .schedule-group-custom-work-days.e-schedule .e-vertical-view .e-work-hours.roger {
                        background-color: rgba(210, 105, 30, 0.39);
                    }`;

let customStyles = document.createElement('style');

customStyles.type = 'text/css';
customStyles.appendChild(document.createTextNode(myCustomCss));
this.renderer2.appendChild(document.body, customStyles);

}

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

Encountering net::ERR_FILE_NOT_FOUND error when trying to upload chunked files through Ionic4 and Angular HttpClient, even after several successful uploads

I am currently facing an issue while attempting to upload a large file (500+Mb, potentially larger) to our php server using an app developed with Ionic4, Angular, and Cordova on an Android 10 emulator. To tackle this, I have implemented a mechanism to uplo ...

androidangularfile-uploadionic4angular-httpclient

The inference of conditional types varies when used with generic types

When a generic type is passed, TypeScript infers the conditional type (with disabled distribution) in a different way. type Box<T> = { a: T }; // Conditional type with disabled distribution using tuple. type CondType<T> = [T] extends [string | ...

typescripttypescript-genericsunion-typesconditional-types

Issue in Ionic 2: The function AppScripts.serve is throwing an error due to TypeError

Currently, I am working on an Ionic 2 project using Angular to develop a small app. When I attempt to run 'ionic serve', I encounter the following error. I have already attempted to completely delete the 'node modules' folder and run &a ...

angularionic-frameworkionic2

Easiest Angular Carousel Solution

My goal is to create a basic Angular Carousel to enhance my understanding of Angular. While I have received helpful answers in the past, I am seeking further clarification to deepen my knowledge of Angular2+ and Typescript. Here's what I have so far: ...

angulartypescript

Unlocking the potential of the date-range picker in Material Angular: extracting value between selected dates

Recently, I successfully passed the dates from the component to the template date picker. My current dilemma is figuring out how to retrieve the value from the template (HTML) to the component (TS) file. Here's a snippet of the code: startDate = new ...

angulartypescriptdatepickerangular-materialangular6

Too late for the spinner

I have developed an Angular application that includes a table and buttons to switch between different data sources for the table. To enhance user experience, I want to display a spinner while switching data sources. However, I am facing an issue where th ...

htmlangularasynchronousspinner

Updating meta tags dynamically for Facebook sharing using Angular 6

I am struggling to dynamically update meta tags such as og:title, og:description, and og:image for sharing on Facebook. I have attempted various methods without success. Initially, I tried setting meta tags with JavaScript like this: var meta = document. ...

javascriptangular

Is "await" considered as a reserved word in ReactJS when using TypeScript?

I am trying to implement async await in my code, but I keep getting an error that says await is a reserved word. Here is the snippet of my code: public componentDidMount() { this.startDrag(); } private startDrag = async () => { const eleme ...

reactjstypescript

What is the process for dynamically setting a div element during runtime?

Is there a way to make a div element appear and disappear based on certain conditions? For instance, if the height of a previous div reaches a specific point, can we show a new div (2) element? And can it disappear when the div reaches its minimum height o ...

angular

"What is the best way to add content to the end of the last child element using Angular's

Currently, I am facing an issue with appending a button after an input field using an Angular7 directive. The problem lies in the fact that the Renderer2 method appendChild is placing the button before the input field. Button appearing before the input fi ...

javascriptangularangular-renderer2

Unable to assign to 'options' as it is not recognized as a valid property of 'p-multiSelect'

I am currently in the process of incorporating the datatable filter from primeng into my project. Here is the code snippet I have written: <p-column field="time" header="Time" [filter]="true" filterPlaceholder="&#xf0b0;"> <ng-template pTe ...

angulardatatableprimeng

"Creating a visual representation of models exchanged between the client and server through Rest

Currently, I am working on a project that involves client-server communication via rest API, with Angular 2 calling restful web services as the primary method. The client side is written in Typescript, which is a subset of JavaScript. My main challenge li ...

resttypescriptclient-serverrestful-architecture

Can you apply transparency to a hex color variable in SCSS and then use that variable again?

In my app, I have a set of scss variables that represent colors used throughout the interface. For example: $primary-color: #00755E There are also colors that are variations of this primary color with different opacities. For instance, $primary-color with ...

javascripthtmlcsstypescriptsass

Encapsulating functions with multiple definitions in Typescript

Struggling with wrapping a function that can have multiple return types based on input parameters in Typescript. Imagine wanting a function to return ReturnA for VariantEnum.a and ReturnB for VariantEnum.b. Consider this implementation of sampleFunction: ...

typescript

Why does Typescript's 'await' seem to not wait as expected?

Apologies for the rookie mistake, I am currently transitioning from a C# background to Ionic, which may be causing some confusion on my end. I'm working on retrieving a stored token from Ionic storage but I'm struggling with understanding promise ...

angulartypescriptionic-framework

Is there a way to execute a code snippet just once when focusing on a specific field?

<form id="myForm"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <label for="mname">Middle name:</label> ...

javascripthtmltypescript

Transforming jQuery library functions into TypeScript syntax

I have developed a directive using TypeScript. Here is an example of the code: 'use strict'; module App.Directives { interface IPageModal extends ng.IDirective { } interface IPageModalScope extends ng.IScope { //modal: any ...

javascriptjqueryangularjstypescript

Issue on Ionic serve: Unable to locate module '@angular/compiler-cli/ngcc'

i encountered a problem after installing a cordova plugin and running "npm audit fix". When attempting to serve my app, an error message pops up: [ng] An unhandled exception occurred: Cannot find module '@angular/compiler-cli/ngcc' [ng] See ...

angulartypescriptcordovaionic-frameworknpm

Why do callbacks in Typescript fail to compile when their arguments don't match?

In my current project, I encountered a scenario where a React callback led to a contrived example. interface A { a: string b: string } interface B { a: string b: string c: string } function foo(fn: (a: A) => void, a: A) { fn( ...

typescript

I have a question about an error message I received: The module 'DashboardModule' imported an unexpected directive 'BarChartComponent'. It is asking for a @NgModule annotation to be added

I'm encountering a compilation error with the code: 'BarChartComponent' imported by the module 'DashboardModule' is causing an unexpected directive error. Please make sure to include a @NgModule annotation. dashboard.modul ...

angularangular6