How to dynamically style the host of a component

Question

Example: https://stackblitz.com/edit/angular-mkcfsd

I have an icon component(app-icon) that dynamically takes a path and inserts the path into an svg viewbox, i get the path's height & width, then set the svg to that height & width. This is so wherever i use the icon, it will align properly. My issue is that the wrapper of app-icon adds 3-4px to the height/width of each icon, i have no idea why. Theres no padding or margin that i can see. (inspect the app-icon element and compare it to its children)

I was thinking it might be best to set the :host equal to the path's width & height. But I haven't found a way to do this dynamically. I've only been able to set styles on the host from my scss file, but unfortunately i can't update these styles dynamically.

Answer 1

You can use @HostBinding

@HostBinding('class.my-class') get myClass() {
  return true;
}