Assign dynamic class in Angular

Question

I am trying to assign a height class like this:

<div class="getScrollViewHeight()">

And my method looks like this:

getScrollViewHeight(): string {
        return 'h-'+this.scrollViewHeightPercentage;
    }

What would be the correct way to do this? And can I use ngClass here?

if you use class with condition then you can use ngClass For Eg. [ngClass]="{'text-success':true}" — Ravi Ashara
– Ravi Ashara, Commented Jan 28, 2021 at 9:22

score 4 · Accepted Answer · 2021-01-28 09:18:04Z

4

You can just use

<div class="{{ 'h-' + scrollViewHeightPercentage }}">

As a sidenote, using functions in your template can potentially mean that it is called very often, depending on how often angular has to check for changes. You should avoid calling functions in your template.

edited Jan 28, 2021 at 9:18

answered Jan 27, 2021 at 15:43

user13258211

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

3 Comments

inorganik Over a year ago

It's fine to call functions in your template, fyi.

user13258211 Over a year ago

@inorganik functions that do a lot of work can slow down your application considerably, that's why I said you should avoid them, if they're not nesscesary. I agree that it would make little to no difference here.

crazyCoder Over a year ago

Using functions in template works but it will affect the performance of your application medium.com/showpad-engineering/…

Collectives™ on Stack Overflow

Assign dynamic class in Angular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related