AI Reading

Quick summary of this article

This guide shows how Angular 20 passes values from the component class (model) to the HTML template (view) using interpolation with double curly braces. It builds a Student Dashboard with standalone components that display student details, subject marks with total and average, and monthly fees with a total.

Data binding in Angular keeps the UI in sync with the component's state; this example uses only {{ }} interpolation.
The Student component holds name, mobile, and roll number, and imports the Marks and Fees standalone components.
The Marks component stores marks for 6 subjects and uses getters to calculate total and average; the average is formatted with the number pipe.
The Fees component lists monthly fees from April to September at ₹2000 each and uses *ngFor to render the table rows.
The app is bootstrapped with bootstrapApplication(Student) in main.ts.

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

📝 Introduction

In Angular 20, passing data from the model (component class) to the view (HTML template) is essential for dynamic apps.
This is known as data binding and reflects app state changes in the UI automatically.
Angular supports this using:
{{ interpolation }}
[property] binding
*ngIf and *ngFor structural directives
[ngClass] and [ngStyle] for styling
In this guide, you’ll use only {{ }} interpolation to pass static values.
You’ll build a Student Dashboard with:
📘 Student info (name, mobile, roll number)
🧮 Marks for 6 subjects with total and average
💰 Monthly fee list (April–September) with total
We’ll use standalone components for a clean and modern Angular approach.

✅ 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));

Angular 20: Pass Values from Model to View with Complete Standalone Component Example