fix(progress): TS2540: Cannot assign to value because it is a read-only property - conflicting on directive composition with ProgressBarDirective

xidedix · xidedix · commit f7e00bce4b88 · 2025-06-16T17:02:39.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 ---
 
+#### `5.5.1`
+
+- fix(progress): TS2540: Cannot assign to `value` because it is a read-only property - conflicting on directive composition with ProgressBarDirective
+
+---
+
 #### `5.5.0`
 
 - chore(dependencies): update to `Angular 20`
diff --git a/projects/coreui-angular/src/lib/progress/progress.component.html b/projects/coreui-angular/src/lib/progress/progress.component.html
@@ -2,7 +2,7 @@
   <ng-container *ngTemplateOutlet="defaultContent" />
 } @else {
   @let pbd = progressBarDirective;
-  <c-progress-bar [animated]="pbd?.animated()" [variant]="pbd?.variant()" [color]="pbd?.color()" [value]="value()">
+  <c-progress-bar [animated]="pbd?.animated()" [variant]="pbd?.variant()" [color]="pbd?.color()" [value]="barValue()">
     <ng-container *ngTemplateOutlet="defaultContent" />
   </c-progress-bar>
 }
diff --git a/projects/coreui-angular/src/lib/progress/progress.component.ts b/projects/coreui-angular/src/lib/progress/progress.component.ts
@@ -47,7 +47,7 @@ export class ProgressComponent {
 
   readonly stacked = this.#progressService.stacked;
   readonly percent = this.#progressService.percent;
-  readonly value = this.#progressService.value;
+  readonly barValue = this.#progressService.value;
 
   readonly contentProgressBars = contentChildren(ProgressBarComponent);
 

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@`
`2`	`2`	`<ng-container *ngTemplateOutlet="defaultContent" />`
`3`	`3`	`} @else {`
`4`	`4`	`@let pbd = progressBarDirective;`
`5`		`- <c-progress-bar [animated]="pbd?.animated()" [variant]="pbd?.variant()" [color]="pbd?.color()" [value]="value()">`
	`5`	`+ <c-progress-bar [animated]="pbd?.animated()" [variant]="pbd?.variant()" [color]="pbd?.color()" [value]="barValue()">`
`6`	`6`	`<ng-container *ngTemplateOutlet="defaultContent" />`
`7`	`7`	`</c-progress-bar>`
`8`	`8`	`}`