How to apply style with percentage in Angular?

Question

As per this link

I can do

<p [style.width.px]="30">
  Some text that may be important.
</p>

This will set a width of 30 px. How do I do the same for percentage ?

<p [style.width.percent]="30"> // This doesn't work
  Some text that may be important.
</p>

@HereticMonkey You know that AngularJS and Angular are world apart right ? — dota2pro, Jun 06 '19 at 19:50
Yeah, guess I was thrown by the same answer... Here's a dupe for Angular: [Angular2 Bind Attribute Value](https://stackoverflow.com/q/31327596/215552) or [Resizing height & width of the div in percentage not pixel by using angular 5](https://stackoverflow.com/q/51494401/215552) — Heretic Monkey, Jun 06 '19 at 19:52
@HereticMonkey ya thats correct , you sent me a wrong link earlier — dota2pro, Jun 06 '19 at 19:55

Reactgular · Accepted Answer · 2019-06-06T19:45:08.087

74

You use the % symbol.

<p [style.width.%]="30">

You use what ever would normally come after the numeric value in CSS.

For example;

30rem => [style.width.rem]="30"
30px => [style.width.px]="30"
30% => [style.width.%]="30"

edited Jun 06 '19 at 19:45

answered Jun 06 '19 at 19:42

Reactgular

Wow that's cool been with Angular since beta never even know they had that. – penleychan Jun 06 '19 at 20:35

1 Answers1