'Add class along with style properties from angular ts file in angular10

I have to add a class to a div on a button click along with a height property in that class. The class will have a property height which is calculated dynamically everytime depending upon the height of the div. I don't want to add style attribute to my div element. I want to add a class with height property.

javascripthtmlcssangularangular10


Solution 1:[1]

If NgClass is not an option as you want the class to be dynamic, you could write a function in your component ts file like this:

getStyles() {
  let calcHeight = .... // do the calcutions
  return {'height': calcHeight + 'px'};
}

and in then html file

<div [ngStyle]="getStyles()"></div>

Solution 2:[2]

you can use a custom attribute directive: https://angular.io/guide/attribute-directives

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Raffael
Solution 2 Can Geylan

Related Questions