CODEWITHSUNDEEP
htmlcssangulartypescript
karansys
karansys

Reputation: 2729

How to position text element based on text characters using ngStyle?

I am running angular, precisely angular 6. I calculated the number of characters of given text element shown in the box.Based on this value I want to position element that is marked in red. I want to do this because number of charters is not constant, when the character length exceeds html element goes out of screen.

What I have tried is applied inline style through ngStyle.

But this didn't work 

  <p id="spandiv" [ngStyle]="{'position':'relative','right':'var(customerLength)px','background-color':'red'}">{{customerName}}</p>

inside typescript I calculate the character and assign it to variable customerLength.

   let stringValue = customer.AccountID+'('+customer.AccountName+')';
   this.customerLength = stringValue.length;

My question is , how to position html element using the value I get from typescript?

enter image description here

Upvotes: 1

Views: 490

Answers (1)

Adrita Sharma
Adrita Sharma

Reputation: 22203

Use 'right':customerLength + 'px'

Try like this:

Working Demo

<p id="spandiv" [ngStyle]="{'position':'relative','right':customerLength + 'px','background-color':'red'}">{{customerName}}</p>

Upvotes: 2

Related Questions