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

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.

CodePudding user response：

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>

CodePudding user response：

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