refactor(progress): signals for value and variant prop

Author: xidedix

src/app/views/base/progress/progress.component.html

@@ -19,7 +19,7 @@
           <c-progress [value]="25" class="mb-3" />
           <c-progress [value]="50" class="mb-3" />
           <c-progress [value]="75" class="mb-3" />
-          <c-progress [value]="value" [variant]="variant" animated class="mb-3">{{ value }}%</c-progress>
+          <c-progress [value]="value()" [variant]="variant()" animated class="mb-3">{{ value() }}%</c-progress>
           <hr>
           <c-progress class="mb-3">
             <c-progress-bar [value]="33">33%</c-progress-bar>

src/app/views/base/progress/progress.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, signal } from '@angular/core';
 import {
   CardBodyComponent,
   CardComponent,
@@ -18,14 +18,14 @@ import { DocsComponentsComponent, DocsExampleComponent } from '@docs-components/
 })
 export class AppProgressComponent {
 
+  readonly value = signal(10);
+  readonly variant= signal<'striped'|undefined>(undefined);
+
   constructor() {
     setTimeout(() => {
-      this.value = 100;
-      this.variant = 'striped';
+      this.value.set(100);
+      this.variant.set('striped');
     }, 3000);
   }
 
-  value = 10;
-  variant?: 'striped';
-
 }