Scribd
Upload
10 views5 pages

Practical 6

The document outlines a practical task to design a component for managing student records, allowing users to add or remove students through a user interface. It includes HTML and TypeScript code for a student component that displays a table of students with options to update the number of students and remove individual entries. The document also provides styling details for the component's appearance.

Uploaded by

srushtird1410
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views5 pages

Practical 6

The document outlines a practical task to design a component for managing student records, allowing users to add or remove students through a user interface. It includes HTML and TypeScript code for a student component that displays a table of students with options to update the number of students and remove individual entries. The document also provides styling details for the component's appearance.

Uploaded by

srushtird1410
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

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:-

You might also like