HostBinding not binding to CSS variable

Question

I am trying to bind a variable in my angular component to a variable inside a CSS keyframe that I am using to animate a div dynamically. I came across HostBinding as a potential solution however I (think) I followed the declaration correctly but the animation does not work when the variables are used. I am using angular 10.0.14 any help is appreciated.

This is my css code:

@keyframes swap{
  0%{background-color:red; left: var(--inX);} 
  100%{background-color: red; left: var(--finX);}
}

And here this is my component.ts HostBinding declaration:

@Component({
  selector: 'app-',
  templateUrl: './component.html',
  styleUrls: ['./component.css'],

})
export class Component implements OnInit {

  @HostBinding('style.--inX')
  private inX: string = '100px';
  
  @HostBinding('style.--finX')
  private finX:string = '200px';
}

Answer 1

there is now wrong with the css but the hosting change the name of the custom css variable from --inX to --in-x.

so to solve just change the custom css varable name to single word or --in-x

})
export class AppComponent {
  name = "Angular " + VERSION.major;

  @HostBinding("style.--start")
  private inX: string = "50px";

  @HostBinding("style.--end")
  private finX: string = "200px";
}

stackblitz demo 🚀🚀

in case you want to use the camelCase style for the variables names you need set the style directly as an object but I still recommend the previous solution because it easy to update a single property directly.

  @HostBinding("style")  private style = {
    '--intX':'100px',
    '--finX':'200px'
  }

stackblitz demo 🌟🌟