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.9k11 gold badges63 silver badges85 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

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related