🔥 Angular 20: Pass Values from Model to View with Complete Code Example

📝 Introduction

✅ File 1: student.ts

import { Component } from '@angular/core';
import { Marks } from '../marks/marks';
import { Fees } from '../fees/fees';

@Component({
  selector: 'app-student',
  standalone: true,
  imports: [Marks, Fees],
  templateUrl: './student.html',
  styleUrls: ['./student.css']
})
export class Student {
  studentName = 'Ayaan Khan';
  mobile = '9876543210';
  rollNumber = 101;
}
  

✅ File 2: student.html

<h2>🎓 Student Information</h2>

<p><strong>Name:</strong> {{ studentName }}</p>
<p><strong>Mobile:</strong> {{ mobile }}</p>
<p><strong>Roll Number:</strong> {{ rollNumber }}</p>

<hr>

<app-marks></app-marks>
<app-fees></app-fees>
  

✅ File 3: marks.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-marks',
  standalone: true,
  templateUrl: './marks.html',
  styleUrls: ['./marks.css']
})
export class Marks {
  mathematics = 85;
  science = 78;
  english = 92;
  hindi = 88;
  history = 74;
  computerScience = 95;

  get total(): number {
    return this.mathematics + this.science + this.english +
           this.hindi + this.history + this.computerScience;
  }

  get average(): number {
    return this.total / 6;
  }
}
  

✅ File 4: marks.html

<h3>📘 Academic Marks</h3>

<ul>
  <li>Mathematics: {{ mathematics }}</li>
  <li>Science: {{ science }}</li>
  <li>English: {{ english }}</li>
  <li>Hindi: {{ hindi }}</li>
  <li>History: {{ history }}</li>
  <li>Computer Science: {{ computerScience }}</li>
</ul>

<p><strong>Total Marks:</strong> {{ total }}</p>
<p><strong>Average Marks:</strong> {{ average | number:'1.0-2' }}</p>
  

✅ File 5: fees.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-fees',
  standalone: true,
  templateUrl: './fees.html',
  styleUrls: ['./fees.css']
})
export class Fees {
  monthlyFees = [
    { month: 'April', amount: 2000 },
    { month: 'May', amount: 2000 },
    { month: 'June', amount: 2000 },
    { month: 'July', amount: 2000 },
    { month: 'August', amount: 2000 },
    { month: 'September', amount: 2000 }
  ];

  get totalFees(): number {
    return this.monthlyFees.reduce((sum, fee) => sum + fee.amount, 0);
  }
}
  

✅ File 6: fees.html

<h3>💰 Monthly Fees Summary</h3>

<table border="1" cellpadding="8">
  <thead>
    <tr>
      <th>Month</th>
      <th>Fees (₹)</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let fee of monthlyFees">
      <td>{{ fee.month }}</td>
      <td>{{ fee.amount }}</td>
    </tr>
  </tbody>
</table>

<p><strong>Total Fees:</strong> ₹{{ totalFees }}</p>
  

✅ File 7: main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { Student } from './app/student';

bootstrapApplication(Student)
  .catch(err => console.error(err));