Employing [style.something.px]="2" in Angular to specify the thickness of the border

Question

Presently, I am setting the width of the element using this code format:

<div [style.width.px]="size" [style.height.px]="size"></div>

What I am aiming for is to utilize a comparable format but to define the border-width css attribute, such as:

<div [style.border-width.px]="borderSize"></div>

Is there a way I can achieve this?

Answer 1

Answer №1

I discovered that I could achieve something similar to this:

// HTML
<div [style.borderWidth.px]="borderSize"></div>

// TypeScript
@Component(...)
export class LoaderComponent {
    borderSize = 2;
}

Answer 2

I discovered that I could achieve something similar to this:

// HTML
<div [style.borderWidth.px]="borderSize"></div>

// TypeScript
@Component(...)
export class LoaderComponent {
    borderSize = 2;
}

Answer 3

<div [style.border-width.px]="borderSize"></div>

It is necessary to modify every CSS property with a hyphen in them by removing the hyphen and capitalizing the next letter.

For example:

[style.borderWidth.px]="size here"
[style.paddingLeft.px]="size here"
[style.marginRight.px]="size here"

Answer 4

<div [style.border-width.px]="borderSize"></div>

It is necessary to modify every CSS property with a hyphen in them by removing the hyphen and capitalizing the next letter.

For example:

[style.borderWidth.px]="size here"
[style.paddingLeft.px]="size here"
[style.marginRight.px]="size here"