How to change a value in CSS using TypeScript?

Question

I want to make an <input> text box where you write a certain color, say 'red' and a certain text gets colored like that. I found some guidelines on how to do it, but the code is in JavaScript, instead of TypeScript. So far I got this:

HTML

<input id="color" />
<h1>Change the color</h1>

CSS

<style>
h1 {
   color: var(--color, blue)
}
</style>

JavaScript

const color = document.querySelector('#color');
color.addEventListener('input', e => {
document.documentElement.style.setProperty('--color', color.value)
})

As I am using .ts classes, I am wondering how can the JavaScript above be written instead?

Every valid javascript code is a valid typescript code. If above javascript code is working, then it should be working as it is in typescript. When you are using variables, mixins etc. in your styles make sure you are using SCSS and not CSS — Kshitij
– Kshitij, Commented Jan 25, 2021 at 15:12
Well, the thing is... If I put that code in the .ts class, it breaks. I get a lot of errors which I guessed that were because of the difference in syntax. — Questieme
– Questieme, Commented Jan 25, 2021 at 15:14
Browsers can't read typescript. You'll have to transpile it to javascript. Make sure webpack is configured to transpile it if it isn't setup. — Jonathan Hamel
– Jonathan Hamel, Commented Jan 25, 2021 at 15:16
@Kshitij Why would they have to use SCSS? CSS has had variables (technically called "custom properties") for quite a while: developer.mozilla.org/en-US/docs/Web/CSS/--* — Heretic Monkey
– Heretic Monkey, Commented Jan 25, 2021 at 15:23
@Kshitij But the OP is just talking about variables only, and specifically about setting them in JavaScript. Using SCSS would not help in this instance. I'm all for SCSS and other preprocessors, but suggesting that their use is somehow mandatory when they are not is getting to be as bad as the "use jQuery" thing was a decade ago. — Heretic Monkey
– Heretic Monkey, Commented Jan 25, 2021 at 15:35

P.S. · Accepted Answer · 2021-01-25 17:02:56Z

4

To achieve that you should read the value of input (let's use two-way binding via [(ngModel)] directive), and then just use this value to apply as a style rule ([style.color] fits perfectly for this). And finally, you should end up with just a few lines of code:

HTML:

<input [(ngModel)]="color" />
<h1 [style.color]="color">Change the color</h1>

TS:

export class AppComponent  {
  color: string;
}

Here is a STACKBLITZ.

I also defined a default blue color in CSS just for example. This works as a default color because style rules defined via style attribute have a higher priority in this case.

UPDATE

If you want to control the color of all the elements over your app, you can use @HostBinding('style') at the top-level component this way:

export class AppComponent  {
  color: string;

  @HostBinding('style')
  get myStyle(): SafeStyle {
    return this.sanitizer.bypassSecurityTrustStyle(`color: ${this.color};`);
  }

  constructor(private sanitizer:DomSanitizer) {}
}

Here is a STACKBLITZ.

edited Jan 25, 2021 at 17:02

answered Jan 25, 2021 at 15:17

P.S.

16.4k14 gold badges65 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Heretic Monkey Over a year ago

This does something a little different from what the OP demonstrates. The OP is changing a CSS variable, which would change the value for any property that uses that variable for its value (background color, color, etc.), not just the h1 necessarily.

Questieme Over a year ago

Thanks for your answer! While it works as intended, I was curious how could I write it in such a manner to change the css file instead. Is it even possible with Angular? EDIT: Sorry, I just checked the StackBlitz link just now. Cheers!!

P.S. Over a year ago

@Questieme I've updated my answer with another approach, check it out, hope it helps.

Raphael Marques · Accepted Answer · 2021-01-25 15:23:40Z

3

In angular we've a directive called ngStyle, which can help you to do that.

So on your html you can add the code bellow:

HTML

<input [(ngModel)]="color" >

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

TS

color: string;

So any color you type inside your input, will be rendered, you can use the name of the color or it's code, like #000 for black or #fff for white and so on.

edited Jan 25, 2021 at 15:23

answered Jan 25, 2021 at 15:15

Raphael Marques

7694 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to change a value in CSS using TypeScript?

2 Answers 2

UPDATE

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

UPDATE

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related