Practical 6
Practical 6
Code:(Student-component.component.html)
<div class="panel-body">
<div>
<!-- Input for the number of students -->
<input type="number" min="0" [(ngModel)]="studentCount" />
<br /><br />
<button (click)="updateTable()">Update Table</button>
</div>
<br />
<!-- Table to display the students -->
<table border="1" cellpadding="10">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let student of students; let i = index">
<td>
<input
type="text"
[(ngModel)]="student.fname"
name="fname{{ i }}"
placeholder="First Name"
/>
</td>
<td>
<input
type="text"
[(ngModel)]="student.lname"
name="lname{{ i }}"
placeholder="Last Name"
/>
</td>
<td>
<input
type="number"
[(ngModel)]="student.age"
name="age{{ i }}"
placeholder="Age"
/>
</td>
<td>
<button (click)="removeStudent(i)">Remove</button>
</td>
</tr>
</tbody>
</table>
</div>
Code:( student-component.component.ts)
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-student',
standalone: true,
imports: [CommonModule, FormsModule],
templateUrl: './student-component.component.html',
styleUrls: ['./student-component.component.css'],
})
export class StudentComponent {
studentCount: number = 0; // Controls the number of student rows
students: { fname: string; lname: string; age: number }[] = []; // Array of students
Code:( App.component.ts)
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, FormsModule, StudentComponent],
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
title = 'Practical-6'; // Set a title for your application
}
Code:( App.component.html)
<div class="container">
<h1>{{ title }}</h1>
Code:( student-component.component.css)
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
th {
background-color: #f4f4f4;
}
button {
color: white;
background-color: red;
border: none;
padding: 5px 10px;
cursor: pointer;
}
button:hover {
background-color: darkred;
}
OUTPUT:-