css-vars-1.ts

@Component({
  template: `
    <h1 [style.--color]="color">CSS vars works!</h1>
  `,
  styles: [
    `
      h1 {
        color: var(--color);
      }
    `
  ]
})
export class MyComponent {
  color = "hotpink";
}

Might want to add:

selector: 'app-root',

under @ Component({, like so:

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  <h1 [style.--color]="color">CSS vars works!</h1>
`,
  styles: [
    `
    h1 {
      color: var(--color);
    }
  `,
  ],
})
export class AppComponent {
  color = 'hotpink';
}

Otherwise the error below will show up:

ERROR
Error: The selector "ng-component" did not match any elements