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?

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?

• javascript
• html
• angular
• typescript

• 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 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 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 Commented Jan 25, 2021 at 15:16
• 1 @Kshitij Why would they have to use SCSS? CSS has had variables (technically called "custom properties") for quite a while: developer.mozilla/en-US/docs/Web/CSS/--* – Heretic Monkey Commented Jan 25, 2021 at 15:23
• 1 @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 Commented Jan 25, 2021 at 15:35

2 Answers 2

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 ponent 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.

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.