Angular Component using @HostBinding to determine CSS variable values works in some Angular applications and not in others

I have written a small UI components library in Angular using Angular version 11.2.13. Within my library I have a Dial Gage Component that uses @HostBinding to set the value of css variables used in my Dial Gage component's CSS file. This is the Dial Gage component's typescript file:

import { Component, HostBinding, Input, OnInit } from '@angular/core';

@Component({
  selector: 'sio-dial-gage',
  templateUrl: './dial-gage.component.html',
  styleUrls: ['./dial-gage.component.scss']
})
export class DialGageComponent implements OnInit {
  @Input() value: number;

  @Input() unit: string;

  @HostBinding('style.--endvalue')
  endvalue: string;

  @HostBinding('style.--rotation')
  rotation: string;

  @HostBinding('style.--percentcolor')
  percentcolor: string;

  @HostBinding('style.--backgroundcolor')
  backgroundcolor: string;

  @HostBinding('style.--inner-percentcolor')
  innerPercentcolor: string;

  minValue = 0;

  maxValue = 100;

  warningMinValue = 25;

  // used term alarm here but the color is red === error, but don't want to call it error
  alarmMinValue = 10;

  ngOnInit() {
    this.endvalue = this.setPressureGage();
    this.rotation = this.getBorderPercentage();
    this.percentcolor = this.getBorderColour('outer');
    this.innerPercentcolor = this.getBorderColour();
  }

  /**
   * Method to return the angle for the dial needle, same as getBorderPercentage but prefixes value with 90
   */
  setPressureGage(): string {
    const pointerAngle = 90 + (this.value * 1.8);
    return `${pointerAngle}deg`;
  }

  /**
   * Method to the angle for border masks
   */
  getBorderPercentage(): string {
    const borderPercent = this.value * 1.8;
    return `${borderPercent}deg`;
  }

  /**
   * Method to return correct border colour for pressure gage
   * @param border - string is outer or null, thus optional
   */
  getBorderColour(border?: string): string {
    // this is the outer border
    if (border === 'outer') {
      if (this.value <= this.warningMinValue && this.value > this.alarmMinValue) {
        return '#F06F32';
      }

      if (this.value <= this.alarmMinValue) {
        return '#E42326';
      }

      return '#009534';
    }

    if (this.value <= this.warningMinValue && this.value > this.alarmMinValue) {
      return '#FCDBCC'; 
    }

    if (this.value <= this.alarmMinValue) {
      return '#F9C8C9';
    }

    return '#D7E9E5';
  }
}

Now this works well in my component library playground and it looks and behaves as it should. When I create new Angular project using the CLI and import my library and then use the Dial Gage component in a HTML template file the Dial Gage component looks and behaves as it should. I then added my component library to an existing project with an older Angular version 9.1.2. I noticed that in this older Angular application the host binding wasn't working. I thought it may be the Angular version, so I create a new application using the Angular CLI with Angular version 9.1.2, imported my library.. and this looked and behaved as expected. I noticed that existing/legacy application where the Dial Gage component's host binding wasn't working had it's AOT set to false, I changed this to true and this still made no difference. I have also changed the Dial Gage component's ViewEncapsulation to see if this was the source of the problem but this makes no difference.

This is what gets rendered in the browser when viewing the older, legacy Angular 9.1.2 application that imports my Library / Dial Gage Component:

<sio-dial-gage _ngcontent-rdm-c43="" ng-reflect-value="50" ng-reflect-unit="Psi" class="ng-star-inserted"></sio-dial-gage>

and this is what rendered in any other application that imports my library with any Angular version from 9.1.2 and up.

<sio-dial-gage _ngcontent-yin-c61="" value="10" unit="Psi" _nghost-yin-c62="" ng-reflect-value="10" ng-reflect-unit="Psi" style="--endvalue:108deg; --rotation:18deg; --percentcolor:#E42326; --inner-percentcolor:#F9C8C9;"></sio-dial-gage>

I was wondering, can anyone suggest some reason or area why the HostBinding in the legacy app isn't being respected/set? I just can't think of what would be affecting my Dial Gage component so the host binding isn't set? If you require more code, information or rewording of my question please say so in the comments. Thanks for the help.