I'm trying to dynamically bind css class with @HostBinding in a directive. Every thing seems to be working but in a closer look width and height property of a class are ommited. Eventualy component with binded class is kind of weird displayed. Not only two elements are displayed instead of one, but their size is wrong. I would be pleased for any sugestion. Below a link to project. stackblitz

By the way I've tried also with Renderer2, but the efect is the same.

CodePudding user response：

Eventualy component with binded class is kind of weird displayed. Not only two elements are displayed instead of one, but their size is wrong.

This is because of incorrect CSS being used.

• height and width property values do not have unit specified.

/* Incorrect - units are missing */
height: 300;
width: 50;

/* Correct usage - specified 'px' as unit (could vary as per use case) */
height: 300px;
width: 50px;

• Instead of border-style maybe you want to use border

/* Incorrect usage */
border-style: 1px solid black;

/* Correct usage - if only border-style required */
border-style: solid;

/* Correct usage - if other border properties required too */
border: 1px solid black;

• The above changes will ensure correct CSS usage, but still won't give expected result.
  The Angular component host element (in your case app-child) will have display: inline style until explicitly specified one. So you may need to specify display: block; for the desired end result.