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

Question

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.

Answer 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>

Answer 2

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