just commentaion and test

code-snapshots/04-essentials-practice/15-migrating-to-modules/src/app/app.component.html

@@ -1,3 +1,4 @@
 <app-header />
 <app-user-input />
 <app-investment-results />
+

code-snapshots/04-essentials-practice/15-migrating-to-modules/src/app/app.module.ts

@@ -12,7 +12,10 @@ import { UserInputModule } from './user-input/user-input.module';
     HeaderComponent,
     InvestmentResultsComponent,
   ],
-  imports: [BrowserModule, UserInputModule],
+  imports: [
+    BrowserModule, 
+    UserInputModule], // krijojme nje userInputModule sepse kemi FormsModule te cilen duam te bashkagjisim brenda user-input folder dhe jo jasht
   bootstrap: [AppComponent]
 })
 export class AppModule {}
+

code-snapshots/04-essentials-practice/15-migrating-to-modules/src/app/header/header.component.html

@@ -1,4 +1,5 @@
 <header>
+  <!-- foton e bashkagjisim ne folder public -->
   <img src="investment-calculator-logo.png" alt="A money bag" />
   <h1>Investment Calculator</h1>
 </header>

code-snapshots/04-essentials-practice/15-migrating-to-modules/src/app/investment-results/investment-results.component.html

@@ -12,6 +12,7 @@
       </tr>
     </thead>
     <tbody>
+      <!-- qe ky funksjon for te kryhet pa gabime, gjurmojme cdo resht ne baz te cdo viti nga result.year -->
       @for (result of results(); track result.year) {
         <tr>
           <td>{{ result.year }}</td>
@@ -24,3 +25,4 @@
     </tbody>
   </table>
 }
+

code-snapshots/04-essentials-practice/15-migrating-to-modules/src/app/investment-results/investment-results.component.ts

@@ -8,7 +8,10 @@ import { InvestmentService } from '../investment.service';
   styleUrl: './investment-results.component.css',
 })
 export class InvestmentResultsComponent {
-  private investmentService = inject(InvestmentService);
 
-  results = computed(() => this.investmentService.resultData());
+  private investmentService = inject(InvestmentService); // therasim servisin me inject 
+
+  // Computed signal are read-only signals that derive their value from other signals. pra na mundeson te marim vlerat nga resultData_signal
+  results = computed(() => this.investmentService.resultData()); 
 }
+

code-snapshots/04-essentials-practice/15-migrating-to-modules/src/app/investment.service.ts

@@ -2,39 +2,48 @@ import { Injectable, signal } from '@angular/core';
 
 import type { InvestmentInput } from './investment-input.model';
 
-@Injectable({ providedIn: 'root' })
+// ishte @Injectable({ providedIn: 'root' })
+@Injectable() // E BEM KESHTU SEPSE DONIM TA BASHKAGJISNIM SERVISIN NE providers: [InvestmentService] TE UserInputModule.
 export class InvestmentService {
-  resultData = signal<{
+
+  resultData = signal<{ // krijojme nje signal per te mbajtur te dhena, nje soj si subject
     year: number;
     interest: number;
     valueEndOfYear: number;
     annualInvestment: number;
     totalInterest: number;
     totalAmountInvested: number;
-  }[] | undefined>(undefined);
+  }[] | undefined>(undefined); // 7. pasi resultData_array mbushet me 10 object, kodi rikthehet ne user-input.component.ts 
+
+  calculateInvestmentResults(data: InvestmentInput) { // 2. mari te dhenat nga user-input.component.ts dhe i kalkulojme
+
+    const { initialInvestment, annualInvestment, expectedReturn, duration } = data; // marim vlerat nje nga nje
 
-  calculateInvestmentResults(data: InvestmentInput) {
-    const { initialInvestment, annualInvestment, expectedReturn, duration } =
-      data;
     const annualData = [];
-    let investmentValue = initialInvestment;
 
-    for (let i = 0; i < duration; i++) {
+    let investmentValue = initialInvestment; 
+
+    for (let i = 0; i < duration; i++) { // 3. duration = 10,
+
       const year = i + 1;
+
       const interestEarnedInYear = investmentValue * (expectedReturn / 100);
+
       investmentValue += interestEarnedInYear + annualInvestment;
-      const totalInterest =
-        investmentValue - annualInvestment * year - initialInvestment;
-      annualData.push({
+
+      const totalInterest = investmentValue - annualInvestment * year - initialInvestment;
+
+      annualData.push({ // 4. mbushim annualData array me 10 object body 
         year: year,
         interest: interestEarnedInYear,
         valueEndOfYear: investmentValue,
         annualInvestment: annualInvestment,
         totalInterest: totalInterest,
         totalAmountInvested: initialInvestment + annualInvestment * year,
       });
-    }
 
-    this.resultData.set(annualData);
+    } // 5. kur i = 10 nuk eshte me vogel se duration = 10, kshtu qe for loop ndalon se kalkuluari te dhena 
+
+    this.resultData.set(annualData); // 6. bashkagjisim annualData_array me 10 objekte ne signal
   }
 }

code-snapshots/04-essentials-practice/15-migrating-to-modules/src/app/user-input/user-input.component.html

@@ -40,6 +40,6 @@
     </p>
   </div>
   <p>
-    <button>Calculate</button>
+    <button type="submit">Calculate</button>
   </p>
 </form>

code-snapshots/04-essentials-practice/15-migrating-to-modules/src/app/user-input/user-input.component.ts

@@ -10,19 +10,24 @@ import { InvestmentService } from '../investment.service';
 export class UserInputComponent {
   enteredInitialInvestment = signal('0');
   enteredAnnualInvestment = signal('0');
-  enteredExpectedReturn = signal('5');
+  // i japin vler 5 input nga [(ngModel)]="enteredExpectedReturn" sepse jemi duke perdorur Two - way binding
+  enteredExpectedReturn = signal('5'); 
   enteredDuration = signal('10');
 
   constructor(private investmentService: InvestmentService) {}
+
+  // *** NOTE: si e lexon kodi vet veten: 
 
-  onSubmit() {
+  onSubmit() { //1.  marim te dhenat nga [(ngModel)] te cilat i bashkagjisim ne calculateInvestmentResults()
     this.investmentService.calculateInvestmentResults({
-      initialInvestment: +this.enteredInitialInvestment(),
+      // signal i ruan vlerat ne string, kesthu qe e konvertojme ne vler number me ndimen e ' + ';
+      initialInvestment: +this.enteredInitialInvestment(),  
       duration: +this.enteredDuration(),
       expectedReturn: +this.enteredExpectedReturn(),
       annualInvestment: +this.enteredAnnualInvestment(),
     });
 
+    // 8. kur funksjoni mesiper ka kalur me sukse, kodi lexon funksjonet me posht duke i konvertuar inputet me vlerat fillestare.
     this.enteredInitialInvestment.set('0');
     this.enteredAnnualInvestment.set('0');
     this.enteredExpectedReturn.set('5');

code-snapshots/04-essentials-practice/15-migrating-to-modules/src/app/user-input/user-input.module.ts

@@ -2,10 +2,12 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
 import { UserInputComponent } from './user-input.component';
+import { InvestmentService } from '../investment.service';
 
 @NgModule({
   declarations: [UserInputComponent],
-  imports: [FormsModule],
+  imports: [FormsModule], // perdorim [(ngModel)]
+  providers: [InvestmentService],
   exports: [UserInputComponent]
 })
 export class UserInputModule {}

code-snapshots/04-essentials-practice/15-migrating-to-modules/src/investment-results.ts

@@ -2,25 +2,25 @@
 // e.g., integrate it into a service or component
 // You may need to tweak it, depending on where and how you use it
 
-function calculateInvestmentResults() {
-  const annualData = [];
-  let investmentValue = initialInvestment;
+// function calculateInvestmentResults() {
+//   const annualData = [];
+//   let investmentValue = initialInvestment;
 
-  for (let i = 0; i < duration; i++) {
-    const year = i + 1;
-    const interestEarnedInYear = investmentValue * (expectedReturn / 100);
-    investmentValue += interestEarnedInYear + annualInvestment;
-    const totalInterest =
-      investmentValue - annualInvestment * year - initialInvestment;
-    annualData.push({
-      year: year,
-      interest: interestEarnedInYear,
-      valueEndOfYear: investmentValue,
-      annualInvestment: annualInvestment,
-      totalInterest: totalInterest,
-      totalAmountInvested: initialInvestment + annualInvestment * year,
-    });
-  }
+//   for (let i = 0; i < duration; i++) {
+//     const year = i + 1;
+//     const interestEarnedInYear = investmentValue * (expectedReturn / 100);
+//     investmentValue += interestEarnedInYear + annualInvestment;
+//     const totalInterest =
+//       investmentValue - annualInvestment * year - initialInvestment;
+//     annualData.push({
+//       year: year,
+//       interest: interestEarnedInYear,
+//       valueEndOfYear: investmentValue,
+//       annualInvestment: annualInvestment,
+//       totalInterest: totalInterest,
+//       totalAmountInvested: initialInvestment + annualInvestment * year,
+//     });
+//   }
 
-  return annualData;
-}
+//   return annualData;
+// }