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>

Answer 1

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"