Angular passing parameters to css animation

Question

For the animation CSS code above, I'm wondering whether there's any way to pass the values of borderColor and width as parameter from TypeScript.

CSS Code

.app-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid gray;
  border-radius: 50%;
  animation: app-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: red transparent transparent transparent;
}

Html Code

<div class="app-iconDiv">
</div>

No. You should instead override the css parameters at runtime using Angular css. — Derek Brown
– Derek Brown, Commented Jul 13, 2018 at 6:32

JSON Derulo · Accepted Answer · 2018-07-13 06:55:03Z

1

This is possible with ngStyle (docs).

So for example if you want to style a div element according to your CSS with a borderColor variable from your Angular Component, this is your code:

<div [ngStyle]="{'border-color': borderColor + ' transparent transparent transparent'}"></div>

If there are many styles to apply, you can also create an object in the TypeScript class and reference this object in the ngStyle directive.

HTML:

<div [ngStyle]="myStyle"></div>

TS:

this.myStyle = {
  'border-color': this.borderColor + ' transparent transparent transparent',
  // ...
}

edited Jul 13, 2018 at 6:55

answered Jul 13, 2018 at 6:32

JSON Derulo

18.8k11 gold badges61 silver badges84 bronze badges

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

1 Comment

yang shin Over a year ago

But the style of the content is a lot, can not be written in ngstyle. Is there any other way?

Collectives™ on Stack Overflow

Angular passing parameters to css animation

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related