PRACTICAL:-6
AIM: Design component to perform following tasks
A) To Add or Remove number of students using textbox and
button controls and display it in tabular structure format.
B)Give row level remove button option to student table and record
should be deleted when click on it.
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
// Function to update the table based on the student count
updateTable() {
const currentLength = this.students.length;
if (this.studentCount > currentLength) {
// Add new rows
for (let i = currentLength; i < this.studentCount; i++) {
this.students.push({ fname: '', lname: '', age: 0 });
}
} else if (this.studentCount < currentLength) {
// Remove excess rows
this.students = this.students.slice(0, this.studentCount);
}
}
// Function to remove a student from the list
removeStudent(index: number) {
this.students.splice(index, 1); // Remove the student at the specified index
this.studentCount = this.students.length; // Update the student count
}
}
Code:( App.component.ts)
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { StudentComponent } from './student-component/student-component.component';
@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>
<!-- Embedding the StudentComponent here -->
<app-student></app-student>
</div>
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:-
