Can't select a bound attribute in Angular - css

Question

I have a custom progress bar in angular. I'd like to bind to have a selector for the [value]. However if I bind the attribute in Angular it is no longer possible to select.
<progress-bar value="50"> works
<progress-bar [value]="value"> fails
The attribute doesn't exist in the second case it's just there as one of the ng-reflect-* attributes. Is this expected behavior?
component:
ProgressBar {
private currentValue;
#Input() set value(value: number) { this.currentValue = value; }
get value() { return this.currentValue; }
...
}
scss:
progress-bar {
display: block;
height: 4px;
width: 100%;
// determinate
&[value] {
background: map_get($color-palette, progress-bar-background);
.progress {
height: 100%;
background: map_get($color-palette, progress-bar-color);
animation: none;
transform-origin: top left;
transition: transform 250ms ease;
}
}
// indeterminate
&:not([value]) {
background: transparent;
}
}

Answer 1

Instead of property binding, you can use attribute binding:
<progress-bar [attr.value]="value">
export class ProgressBar {
constructor(private elementRef: ElementRef<HTMLElement>) {}
get value() {
const element = this.elementRef.nativeElement;
return element.getAttribute("value");
}
}
See this stackblitz for a demo.
A simpler solution is to set a class conditionally on the component with HostBinding:
export class ProgressBar {
private currentValue;
#Input()
get value() { return this.currentValue; }
set value(value: number) { this.currentValue = value; }
#HostBinding("class.has-value") get hasValue(): boolean {
return !!this.currentValue;
}
}
and to apply the styling according to the class selector:
progress-bar {
...
&.has-value {
...
}
&:not(.has-value) {
...
}
}
See this stackblitz for a demo.

Answer 2

You are trying to use a one way property binding between a object and method. Remove your getter and setter methods. They are kinda of useless since javascript doesn't have real private properties or methods.
ProgressBar {
#Input() public value: number
...
}