Changed variables name

src/app/components/challenge-card/challenge-card.component.html

@@ -3,11 +3,11 @@
     <div class="grid grid-cols-5 items-center">
 
         <h3 class="col-span-4 text-base font-semibold text-gray-900 m-0">
-            {{ data().label }}
+            {{ challenge().label }}
         </h3>
     </div>
 
-    <p class="text-[11px] text-gray-500 leading-relaxed">{{ data().libelle }}</p>
+    <p class="text-[11px] text-gray-500 leading-relaxed">{{ challenge().libelle }}</p>
 
     <div class="grid grid-cols-5 items-center">
         <span class="col-span-4 text-[11px] text-gray-500">
@@ -41,11 +41,11 @@
             <div class="mt-4 bg-white rounded-2xl shadow-sm p-4 space-y-3">
                 <div class="grid grid-cols-5 items-center">
                     <h3 class="col-span-4 text-base font-semibold text-gray-900 m-0">
-                        {{ data().label }}
+                        {{ challenge().label }}
                     </h3>
                 </div>
 
-                <p class="text-[11px] text-gray-500 leading-relaxed">{{ data().libelle }}</p>
+                <p class="text-[11px] text-gray-500 leading-relaxed">{{ challenge().libelle }}</p>
             </div>
 
             <app-tooltip title="Aucun malus si non réalisé"
@@ -55,7 +55,7 @@
                 <app-proof-form #proofForm></app-proof-form>
             </div>
 
-            <ion-button expand="block" (click)="sendProof(data().id)">Soumettre ma preuve</ion-button>
+            <ion-button expand="block" (click)="sendProof(challenge().id)">Soumettre ma preuve</ion-button>
 
         </ion-content>
     </ng-template>

src/app/components/challenge-card/challenge-card.component.ts

@@ -4,6 +4,11 @@ import {GetRandomChallengeDto, RandomchallengesService} from "../../services/api
 import {firstValueFrom} from "rxjs";
 import {TooltipComponent} from "../tooltip/tooltip.component";
 import {ProofFormComponent} from "../proof-form/proof-form.component";
+import {addIcons} from "ionicons";
+import {checkmarkCircleOutline} from "ionicons/icons";
+addIcons({
+    "checkmark-circle": checkmarkCircleOutline,
+})
 
 @Component({
     selector: 'app-challenge-card',
@@ -20,8 +25,7 @@ export class ChallengeCardComponent {
     private toastCtrl = inject(ToastController);
     private loadCtrl = inject(LoadingController);
 
-    data = input.required<GetRandomChallengeDto>();
-
+    challenge = input.required<GetRandomChallengeDto>();
     proof = viewChild<ProofFormComponent>('proofForm');
 
     isModalOpen = false;

src/app/pages/home/home.component.html

@@ -39,7 +39,7 @@
 <ion-content style="--background: #f7f6f2;">
     <div class="mt-4">
         <app-title-part textInfo="Défi bonus du jour"></app-title-part>
-        <app-challenge-card [data]="randomChallenge()"></app-challenge-card>
+        <app-challenge-card [challenge]="randomChallenge()"></app-challenge-card>
     </div>
 
     <div class="mt-4">