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';
}

can you share more code how did you apply all of these together , or create a demo using stackblitz.com — Muhammed Albarmavi
– Muhammed Albarmavi, Commented Dec 22, 2020 at 1:01

Muhammed Albarmavi · Accepted Answer · 2020-12-22 10:43:49Z

4

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 🌟🌟

edited Dec 22, 2020 at 10:43

answered Dec 22, 2020 at 1:44

Muhammed Albarmavi

24.6k9 gold badges72 silver badges92 bronze badges

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

Collectives™ on Stack Overflow

HostBinding not binding to CSS variable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related