In Angular version 11.2.13, I developed a small UI components library that includes a Dial Gage Component utilizing @HostBinding to assign values to CSS variables in the component's CSS file. Below is the typescript file for my Dial Gage component:
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;
alarmMinValue = 10;
ngOnInit() {
this.endvalue = this.setPressureGage();
this.rotation = this.getBorderPercentage();
this.percentcolor = this.getBorderColour('outer');
this.innerPercentcolor = this.getBorderColour();
}
setPressureGage(): string {
const pointerAngle = 90 + (this.value * 1.8);
return `${pointerAngle}deg`;
}
getBorderPercentage(): string {
const borderPercent = this.value * 1.8;
return `${borderPercent}deg`;
}
getBorderColour(border?: string): string {
// code here
}
}
The Dial Gage component functions correctly in my component library playground and new Angular projects where it is used. However, when added to an existing Angular project with version 9.1.2, the host binding does not work as expected. Despite trying multiple solutions like changing AOT settings and ViewEncapsulation, the issue persists.
This is how the Dial Gage component renders in legacy Angular 9.1.2 applications:
<sio-dial-gage _ngcontent-rdm-c43="" ng-reflect-value="50" ng-reflect-unit="Psi" class="ng-star-inserted"></sio-dial-gage>
While in newer Angular versions (from 9.1.2 onwards), it renders as:
<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 am seeking advice on why the HostBinding feature is not working properly in the legacy application. Any suggestions or insights into the possible causes of this issue would be greatly appreciated. Thank you for your help.