Add css style after element loads in Angular

Question

I have a function that is used to calculate the left margin which will be assigned to list elements. The issue is that the id for the list element is generated when the page loads and has a binding to it:

<li *ngFor "let msg in messages; let i in index;" id="#messages-{{i}}"> ... </li>

How can I use my function to assign the margin to these list contents? Every li element will have different margins.

Can you provide more context for what you're trying to do? There might be a better way. Also, why are you using a hash in the id attribute? — Phix
– Phix, Commented Feb 9, 2021 at 23:45
@Phix I am trying to add left margin that will vary for each list element from a javascript function. So every list element will have a different left margin when they are loaded on the webpage. The hash is just for my own purposes, I can remove it too. — shasha
– shasha, Commented Feb 10, 2021 at 0:10

Dicekey · Accepted Answer · 2021-02-10 01:04:39Z

1

In your HTML Template

<li *ngFor "let msg in messages; let i in index;" 
[style.marginTop.px]="getMarginLeft(msg)" id="#messages-{{i}}"> ... </li>

In your Ts file

  getMarginLeft(msg) {
    return msg.length;
  }

answered Feb 10, 2021 at 1:04

Dicekey

4054 silver badges12 bronze badges

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

2 Comments

shasha Over a year ago

Thank you this helped!

Dicekey Over a year ago

@shasha if this is what you ask for can you mark my answer as a correct answer.

Collectives™ on Stack Overflow

Add css style after element loads in Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related