Dynamic styling using a method angular 4

Question

i am building a tree structure in angular 4. my issue is i have to start each node at the same level and indent only the name text from the left border. for every node i have got the depth of the node. i want to add a style like this.

<p   style="padding-left : calc_padding(depth)"> some Text </p>

calc_padding(depth){
return depth *5
}

how can i do that.

i have read style sanitizer but could not find how to use it in my case.

i have tried to impliment [style] = "method(depth)" and [style.padding-left] = "method(depth)" but i am unable to get the things done as i have wanted.

Any help in this regard will be appreciated.

Poul Kruijt · Accepted Answer · 2017-11-20 10:08:47Z

2

You have to use the style binding like this:

<p [style.paddingLeft.px]="calc_padding(depth)"></p>

If the value returned from calc_padding should be interpreted as pixels

answered Nov 20, 2017 at 10:08

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

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

Collectives™ on Stack Overflow

Dynamic styling using a method angular 4

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related