Shri Labhubhai Trivedi Institute of Engineering & Technology

Department of Computer Engineering (Diploma)

Semester – 4th
Subject Name– MPT(4340705)

Practical Index
Sr.
No. Practical Date
1 Create first application to print Hello World message 14-03-2024
using Angular framework.

2 Design a webpage to utilize property binding and event 21-03-2024

binding concepts using button and textbox controls.

3 Design a web page to display student grading systems 28-03-2024

in tabular format with alternate color style.

4 A) To add or Remove number of students 06-04-2024

B) Give row level remove button option to 13-04-2024

student table

5 Create a component to display a products list from 20-04-2024

array.
27-04-2024

6 Create a program to display a color list. 03-05-2024

7 Create a program to age eligibility using if else loop. 16-05-2024

8 Write a program to print textbox value given by user. 18-05-2024

9 Write a program to print textbox value given by user 24-05-2024

with static message.

10 Write a program to print value of button when we click 30-05-2024

the button.

Prof. Rinkal Umaraniya – Assi. Professor, SLTIET, Rajkot |1

 Shri Labhubhai Trivedi Institute of Engineering & Technology
Department of Computer Engineering (Diploma)
Semester – 4th
Subject Name– MPT(4340705)

Practical
Practical – 1
Aim: Create first application to print Hello World message
using Angular framework.

app.component.htmlfile:

<div>
<divclass="center-screen">
<h1>{{text1}}</h1>
</div>
<divclass="center-screen">
<h2>{{text2}}</h2>
</div>
<divclass="center-screen">
<h2>{{text3}}</h2>
</div>
</div>

app.component.tsfile

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

@Component
({
selector:'app-root',
templateUrl: './app.component. html',styleUrls:['./app. component.css']
})
export class AppComponent{
text1="HelloWorld"
}
Prof. Rinkal Umaraniya – Assi. Professor, SLTIET, Rajkot |2
 Shri Labhubhai Trivedi Institute of Engineering & Technology
Department of Computer Engineering (Diploma)
Semester – 4th
Subject Name– MPT(4340705)

app.module.ts file:

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

import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})

Output :

Prof. Rinkal Umaraniya – Assi. Professor, SLTIET, Rajkot |3

 Shri Labhubhai Trivedi Institute of Engineering & Technology
Department of Computer Engineering (Diploma)
Semester – 4th
Subject Name– MPT(4340705)

Practical – 2
Aim: Design a webpage to utilize property binding and event binding
concepts using button and textbox controls.

Write the following command into cmd or VS Code.

1. ng New Practical-2
2. Open the directory of Practical-2 and search for the src/app directory in the
directory.
3. Write the following code in the app.component.ts file create Practical- 2
src/app directory.

app.component.ts file:

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent {

name: string = '';
greeting: string = '';
greet() {
if (this.name) {
this.greeting = `Hello, ${this.name}!`;
}
else {
this.greeting = 'Please enter your name.';
}
}
}

Prof. Rinkal Umaraniya – Assi. Professor, SLTIET, Rajkot |4

 Shri Labhubhai Trivedi Institute of Engineering & Technology
Department of Computer Engineering (Diploma)
Semester – 4th
Subject Name– MPT(4340705)

app.component.html file:

<h1>Property Binding and Event Binding Example</h1>

<div>
<label for="name-input">Enter your name: </label>
<input type="text" id="name-input" [(ngModel)]="name">
<br /><br />
<button (click)="greet()">Greet</button>
</div>
<div *ngIf="greeting">
<p>{{ greeting }}</p>
</div>

app.module.ts file:

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

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({

declarations: [ AppComponent],
imports: [ BrowserModule, FormsModule ],
providers: [],
bootstrap: [AppComponent]
})

export class AppModule { }

Prof. Rinkal Umaraniya – Assi. Professor, SLTIET, Rajkot |5

 Shri Labhubhai Trivedi Institute of Engineering & Technology
Department of Computer Engineering (Diploma)
Semester – 4th
Subject Name– MPT(4340705)

Output :

Prof. Rinkal Umaraniya – Assi. Professor, SLTIET, Rajkot |6

 Shri Labhubhai Trivedi Institute of Engineering & Technology
Department of Computer Engineering (Diploma)
Semester – 4th
Subject Name– MPT(4340705)

Practical – 3
Aim: Design a web page to display student grading systems in tabular format
with alternate color style.

app.component.html file:

<div class='panel panel-primary'>

<div class='panel-heading'>
<h1>{{title}}</h1>
</div>
<br /><br />
<div class='panel-body'>
<div class='table-responsive'>

<table border="1">
<thead>
<tr>
<th>Student Name</th>
<th>Maths</th>
<th>Science</th>
<th>English</th>
<th>Total</th>
<th>Grade</th>
</tr>
</thead>

<body>
<tr *ngFor="let student of students; let i = index" [ngStyle]="{ 'background-color': i % 2 === 0 ?
'coral' : 'lightgray' }">

<td>{{ student.name }}</td>

<td>{{ student.maths }}</td>
<td>{{ student.science }}</td>
<td>{{ student.english }}</td>
<td>{{ student.total }}</td>
<td [ngSwitch]="student.grade">

<span *ngSwitchCase="'A+'">A+</span>
<span *ngSwitchCase="'A'">A</span>
<span *ngSwitchCase="'B'">B</span>

Prof. Rinkal Umaraniya – Assi. Professor, SLTIET, Rajkot |7

 Shri Labhubhai Trivedi Institute of Engineering & Technology
Department of Computer Engineering (Diploma)
Semester – 4th
Subject Name– MPT(4340705)

<span *ngSwitchCase="'C'">C</span>
<span *ngSwitchDefault>No Grade</span>
</td>
</tr>
</body>
</table>
</div>
</div>
</div>

app.component.ts file:

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

@Component({

selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent {

title: string ="Student Grading System";
students = [
{
name: 'John', maths: 90,
science: 85,
english: 92,
total: 267, grade: 'A+'
},
{
name: 'Jane', maths: 80,
science: 75,
english: 85,
total: 240, grade: 'A'
},
{
name: 'Tom', maths: 70,
science: 80,
english: 75,
total: 225, grade: 'B'
},
{
name: 'Lisa',

Prof. Rinkal Umaraniya – Assi. Professor, SLTIET, Rajkot |8

 Shri Labhubhai Trivedi Institute of Engineering & Technology
Department of Computer Engineering (Diploma)
Semester – 4th
Subject Name– MPT(4340705)

maths: 65,
science: 70,
english: 80,
total: 215, grade: 'C'
}
];
}

app.module.ts file:

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

import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [ AppComponent,],
imports: [ BrowserModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Output :

Prof. Rinkal Umaraniya – Assi. Professor, SLTIET, Rajkot |9

 Shri Labhubhai Trivedi Institute of Engineering & Technology
Department of Computer Engineering (Diploma)
Semester – 4th
Subject Name– MPT(4340705)

Practical – 4
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.

student-component.html file:

<div class="solid">
<div class='panel panel-primary'>
<div class='panel-heading'>
<h3>{{title}}</h3>
</div>

<div class='panel-body'>

<div>
<input type="number" [(ngModel)]="studentCount" min="0" value="0">
<br /><br />

<button (click)="updateTable()">Update Table</button>

</div>
<br />

<table>
<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}}"></td>

Prof. Rinkal Umaraniya – Assi. Professor, SLTIET, Rajkot |10

 Shri Labhubhai Trivedi Institute of Engineering & Technology
Department of Computer Engineering (Diploma)
Semester – 4th
Subject Name– MPT(4340705)

<td><input type="text" [(ngModel)]="student.lname" name="lname{{i}}"></td>

<td><input type="number" [(ngModel)]="student.age" name="age{{i}}"
min="0"></td>
<td><button (click)="removeStudent(i)">Remove</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

student-component.component.ts file:

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

@Component({
selector: 'app-student-component',
templateUrl: './student-component.component.html',
styleUrls: ['./student-component.component.css']
})

export class StudentComponentComponent implements OnInit {

title: string ="Students Record" ;
studentCount: number = 0;
students: Student[] = [];

ngOnInit() { console.log("init")
this.students.push(new Student("Shweta","Patel", 21));
this.students.push(new Student("Neha","Patel", 20));
this.students.push(new Student("Ami","Patel", 22));
this.studentCount = this.students.length;
}

updateTable() {
const currentCount = this.students.length;
if (this.studentCount > currentCount) {
for (let i = currentCount; i < this.studentCount; i++) {
this.students.push(new Student('', '', 0));
}
}
else if (this.studentCount < currentCount) {
this.students.splice(this.studentCount);
}
Prof. Rinkal Umaraniya – Assi. Professor, SLTIET, Rajkot |11
 Shri Labhubhai Trivedi Institute of Engineering & Technology
Department of Computer Engineering (Diploma)
Semester – 4th
Subject Name– MPT(4340705)

removeStudent(index: number) {
this.students.splice(index, 1);
}
}
class Student {
constructor(public fname: string, public lname: string, public age: number) { }
}

Student-component. Component.css file:

table {
border-collapse: collapse;
width: 100%;
}

th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}

th {
background-color: #f2f2f2;
}

input[type="number"], input[type="text"] {
width: 100%;
}

.center-screen {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}

div.solid {
border-style: solid;
padding: 15px;
}

Prof. Rinkal Umaraniya – Assi. Professor, SLTIET, Rajkot |12

 Shri Labhubhai Trivedi Institute of Engineering & Technology
Department of Computer Engineering (Diploma)
Semester – 4th
Subject Name– MPT(4340705)

app.module.ts file:

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

import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { StudentComponentComponent } from './student-component/student-
component.component';

@NgModule({
declarations: [ AppComponent, StudentComponentComponent ],
imports: [ BrowserModule, FormsModule ],
providers: [],
bootstrap: [AppComponent]
})

export class AppModule { }

Output:

Prof. Rinkal Umaraniya – Assi. Professor, SLTIET, Rajkot |13

 Shri Labhubhai Trivedi Institute of Engineering & Technology
Department of Computer Engineering (Diploma)
Semester – 4th
Subject Name– MPT(4340705)

Practical – 5
Aim: Create a component to display a products list from array. The product
component should display a product Id, name, purchase date, price, and
image for the product and search using various pipes.

filter.pipe.ts file:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
name: 'filter'
})

export class FilterPipe implements PipeTransform {

transform(items: any[], searchText: string): any[] {
if (!items) {
return [];
}
if (!searchText) {
return items;
}
searchText = searchText.toLowerCase();
return items.filter(item => {
return item.name.toLowerCase().includes(searchText);
});
}
}

product-list.component.css file:

table {
border-collapse: collapse; width: 100%;
}

th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
Prof. Rinkal Umaraniya – Assi. Professor, SLTIET, Rajkot |14
 Shri Labhubhai Trivedi Institute of Engineering & Technology
Department of Computer Engineering (Diploma)
Semester – 4th
Subject Name– MPT(4340705)

th {
background-color: #f2f2f2;
}

input[type="text"] {
border: 2px solid blue;
border-radius: 4px;
padding: 12px;
margin-bottom: 10px;
margin-right: 10px;
}

input[type="number"], input[type="text"] {
width: 98%;
}

.center-screen {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}

div.solid {
border-style: solid;
padding: 15px;
}

product-list.component.ts file:

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

@Component({
selector: 'app-product-list',
templateUrl: './product-list.component.html',
styleUrls: ['./product-list.component.css']
})

export class ProductListComponent {

Prof. Rinkal Umaraniya – Assi. Professor, SLTIET, Rajkot |15

 Shri Labhubhai Trivedi Institute of Engineering & Technology
Department of Computer Engineering (Diploma)
Semester – 4th
Subject Name– MPT(4340705)

searchText: string = '';

title: string ="Product List" ;
products: any[] = [

{ id: 1, name: 'Cococola Classic', purchaseDate: new Date('2022-01-01'),

price: 10.99, imageUrl: 'https://greendroprecycling.com/wp-
content/uploads/2017/04/GreenDrop_Station_Aluminum_Can_2-150x150.jpg' },

{ id: 2, name: 'Stainless steel water bottle', purchaseDate: new Date('2022-02- 01'),
price: 20.99, imageUrl: 'https://thumbs.dreamstime.com/z/metal-water- bottle-reusable-
stainless-steel-flask-metal-water-bottle-reusable-stainless-steel- eco-flask-mockup-empty-
aluminum-187861207.jpg' },

{ id: 3, name: 'Perfume bottles vector.', purchaseDate: new Date('2022-03-01'),

price: 30.99, imageUrl: 'https://cdn.w600.comps.canstockphoto.com/perfume- bottles-
vector-product-clipart-vector_csp56261954.jpg' },

{ id: 4, name: 'Men Sports Shooes Nike', purchaseDate: new Date('2022-04-01'),

price: 40.99, imageUrl: 'https://images.squarespace-
cdn.com/content/v1/5911f31c725e251d002da9ac/1613210424136-
AS3MY547OBB5Y3GSQ359/Product+Photography?format=1000w' },

{ id: 5, name: 'Apple Smart Watch', purchaseDate: new Date('2022-05-01'), price:

100.99, imageUrl: 'https://images.unsplash.com/photo-1546868871-
7041f2a55e12?ixlib=rb-
4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=for
mat&fit=crop&w=464&q=80' },

{ id: 6, name: 'Sony Camera', purchaseDate: new Date('2022-06-01'), price: 60.99,

imageUrl: 'https://images.pexels.com/photos/90946/pexels-photo-
90946.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' },
];
}

Product-list.component.html file:

<div class="solid">
<div class='panel panel-primary'>

<div class='panel-heading'>

Prof. Rinkal Umaraniya – Assi. Professor, SLTIET, Rajkot |16

 Shri Labhubhai Trivedi Institute of Engineering & Technology
Department of Computer Engineering (Diploma)
Semester – 4th
Subject Name– MPT(4340705)

<h3>{{title}}</h3>
</div>
<br />

<div class='panel-body'>
<div class='table-responsive'>

<input type="text" [(ngModel)]="searchText" placeholder="Search">

<br />
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Purchase Date</th>
<th>Price</th>
<th>Image</th>
</tr>
</thead>

<tbody>
<tr *ngFor="let product of products | filter: searchText">
<td>{{ product.id }}</td>
<td>{{ product.name | uppercase}}</td>
<td>{{ product.purchaseDate | date }}</td>
<td>{{ product.price | currency }}</td>
<td><img [src]="product.imageUrl" height="100" width="100"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>

app.module.ts file:

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

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { ProductListComponent } from './product-list/product-list.component';

Prof. Rinkal Umaraniya – Assi. Professor, SLTIET, Rajkot |17

 Shri Labhubhai Trivedi Institute of Engineering & Technology
Department of Computer Engineering (Diploma)
Semester – 4th
Subject Name– MPT(4340705)

import { FilterPipe } from './pipes/filter.pipe';

@NgModule({
declarations: [ AppComponent, ProductListComponent, FilterPipe ],
imports: [ BrowserModule, FormsModule],
providers: [],
bootstrap: [AppComponent]
})

export class AppModule { }

Prof. Rinkal Umaraniya – Assi. Professor, SLTIET, Rajkot |18

 Shri Labhubhai Trivedi Institute of Engineering & Technology
Department of Computer Engineering (Diploma)
Semester – 4th
Subject Name– MPT(4340705)

Output:

Prof. Rinkal Umaraniya – Assi. Professor, SLTIET, Rajkot |19

 Shri Labhubhai Trivedi Institute of Engineering & Technology
Department of Computer Engineering (Diploma)
Semester – 4th
Subject Name– MPT(4340705)

Practical – 6
Aim: Create a program to display a color list.

Prof. Rinkal Umaraniya – Assi. Professor, SLTIET, Rajkot |20

 Shri Labhubhai Trivedi Institute of Engineering & Technology
Department of Computer Engineering (Diploma)
Semester – 4th
Subject Name– MPT(4340705)

Output:

Prof. Rinkal Umaraniya – Assi. Professor, SLTIET, Rajkot |21

 Shri Labhubhai Trivedi Institute of Engineering & Technology
Department of Computer Engineering (Diploma)
Semester – 4th
Subject Name– MPT(4340705)

Practical – 7
Aim: Create a program to age eligibility using if else loop.

Prof. Rinkal Umaraniya – Assi. Professor, SLTIET, Rajkot |22

 Shri Labhubhai Trivedi Institute of Engineering & Technology
Department of Computer Engineering (Diploma)
Semester – 4th
Subject Name– MPT(4340705)

Output:

Prof. Rinkal Umaraniya – Assi. Professor, SLTIET, Rajkot |23

 Shri Labhubhai Trivedi Institute of Engineering & Technology
Department of Computer Engineering (Diploma)
Semester – 4th
Subject Name– MPT(4340705)

Practical – 8
Aim: Write a program to print textbox value given by user.

Prof. Rinkal Umaraniya – Assi. Professor, SLTIET, Rajkot |24

 Shri Labhubhai Trivedi Institute of Engineering & Technology
Department of Computer Engineering (Diploma)
Semester – 4th
Subject Name– MPT(4340705)

Output:

Practical – 9

Prof. Rinkal Umaraniya – Assi. Professor, SLTIET, Rajkot |25

 Shri Labhubhai Trivedi Institute of Engineering & Technology
Department of Computer Engineering (Diploma)
Semester – 4th
Subject Name– MPT(4340705)

Aim: Write a program to print textbox value given by user with static
message.

Output:

Prof. Rinkal Umaraniya – Assi. Professor, SLTIET, Rajkot |26

 Shri Labhubhai Trivedi Institute of Engineering & Technology
Department of Computer Engineering (Diploma)
Semester – 4th
Subject Name– MPT(4340705)

Practical – 10
Prof. Rinkal Umaraniya – Assi. Professor, SLTIET, Rajkot |27
 Shri Labhubhai Trivedi Institute of Engineering & Technology
Department of Computer Engineering (Diploma)
Semester – 4th
Subject Name– MPT(4340705)

Aim: Write a program to print value of button when we click the button.

Output:
Prof. Rinkal Umaraniya – Assi. Professor, SLTIET, Rajkot |28
 Shri Labhubhai Trivedi Institute of Engineering & Technology
Department of Computer Engineering (Diploma)
Semester – 4th
Subject Name– MPT(4340705)

Prof. Rinkal Umaraniya – Assi. Professor, SLTIET, Rajkot |29