Enrollment Number : _______________ Subject : Modern Practical Tools
Name : __________________________ Subject Code : 4340705
Practical – 1
Setup environment for Angular framework by Installing Node.js, npm
package manager using editor like Visual Code.
Step 1 :
Install Node.js: Node.js is a JavaScript runtime that allows you to run JavaScript outside
of a web browser. To install Node.js, go to https://nodejs.org/ and download the latest
stable version for your operating system. Follow the installation instructions to install
Node.js on your computer.
Step 2 :
Install npm: npm is a package manager for Node.js that allows you to install and manage
packages that are needed for your Angular project. After you have installed Node.js,
npm should be automatically installed on your system. To check if npm is installed, open
your terminal or command prompt and type npm -v. If you see a version number, npm is
installed and you can skip to the next step. If not, you can install npm by running npm
install npm -g.
Step 3 :
Install Angular CLI: Angular CLI is a command-line interface tool that allows you to
create, build, and test Angular projects. To install Angular CLI, open your terminal or
command prompt and run npm install -g @angular/cli. This will install Angular CLI
globally on your system.
Step 4 :
Create a new Angular project: To create a new Angular project, open your terminal or
command prompt and navigate to the directory where you want to create your project.
Then run ng new my-project where "my-project" is the name of your project. This will
create a new Angular project with all the necessary files and dependencies.
Page 1 of 22
Enrollment Number : _______________ Subject : Modern Practical Tools
Name : __________________________ Subject Code : 4340705
Step 5 :
Open your project in Visual Studio Code: Open Visual Studio Code and select "File" >
"Open Folder" and navigate to the directory where you created your Angular project.
Open the folder and you should see all the files and folders that were generated by
Angular CLI.
Step 6 :
Test your project: To test your project, open your terminal or command prompt, navigate
to the root directory of your project, and run ng serve. This will compile your project and
start a development server. Open your web browser and navigate to
http://localhost:4200 to see your project in action.
You now have a fully functional Angular development environment set up with
Node.js, npm, and Visual Studio Code.
Page 2 of 22
Enrollment Number : _______________ Subject : Modern Practical Tools
Name : __________________________ Subject Code : 4340705
Practical-2
Create first application to print Hello World mesage using angular
framework.
Input :
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body>
<div ng-app="">
<p>Input something in the input box:</p>
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
<h1>Hello {{name}} </h1>
</div></body></html>
Output :
Page 3 of 22
Enrollment Number : _______________ Subject : Modern Practical Tools
Name : __________________________ Subject Code : 4340705
Practical-3
Design a web page to utilize property binding and event binding concepts
using button and textbox controls.
Input 1 :
<html ng-app="myApp">
<head>
<title>AngularJS Property Binding and Event Binding Example</title>
<scriptsrc="angular.min.js”>
</script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<label>Enter your name:</label>
<input type="text" ng-model="name">
<br>
<button ng-click="sayHello()">Say Hello</button>
<p>{{greeting}}</p>
</div>
</body>
</html>
Page 4 of 22
Enrollment Number : _______________ Subject : Modern Practical Tools
Name : __________________________ Subject Code : 4340705
Input 2 :
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope)
{
$scope.sayHello = function()
{
$scope.greeting = 'Hello, ' + $scope.name + '!';
};});
Output :
Page 5 of 22
Enrollment Number : _______________ Subject : Modern Practical Tools
Name : __________________________ Subject Code : 4340705
Practical-4
Create various components of web page using Attribute Directives.
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid black;
margin: 10px;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}
</style>
</head>
<body>
Page 6 of 22
Enrollment Number : _______________ Subject : Modern Practical Tools
Name : __________________________ Subject Code : 4340705
<div ng-controller="myCtrl">
<div my-box my-color="red"></div>
<div my-box my-color="blue"></div>
<div my-box my-color="green"></div>
<div my-box my-color="yellow"></div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
// Controller code goes here
});
app.directive('myBox', function() {
return {
restrict: 'A',
scope: {
myColor: '@'
},
link: function(scope, element, attrs) {
element.addClass('box ' + scope.myColor);
}
};
});
</script>
</body>
</html>
Page 7 of 22
Enrollment Number : _______________ Subject : Modern Practical Tools
Name : __________________________ Subject Code : 4340705
Practical-5
Design a web page to display student grading system in tabular format
with alternate color style using ngSwitch, ngStyle Directives.
Input-1 :
// app.js
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope)
$scope.students = [
{ name: 'John', grade: 'A' },
{ name: 'Jane', grade: 'B' },
{ name: 'Joe', grade: 'C' },
{ name: 'Jack', grade: 'D' },
{ name: 'Jill', grade: 'F' }
];});
Page 8 of 22
Enrollment Number : _______________ Subject : Modern Practical Tools
Name : __________________________ Subject Code : 4340705
Input-2 :
<!-- index.html -->
<html ng-app="myApp">
<head>
<title>Student Grading System</title>
<style>
.table-striped > tbody > tr:nth-child(odd) {
background-color: #f9f9f9;
.table-striped > tbody > tr:nth-child(even) {
background-color: #e9e9e9;
</style>
</head>
<body ng-controller="myCtrl">
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Grade</th>
Page 9 of 22
Enrollment Number : _______________ Subject : Modern Practical Tools
Name : __________________________ Subject Code : 4340705
</tr>
</thead>
<tbody>
<tr ng-repeat="student in students" ng-switch on="student.grade">
<td>{{ student.name }}</td>
<td ng-switch-when="A" ng-style="{ 'color': 'green' }">
{{ student.grade }}</td>
<td ng-switch-when="B" ng-style="{ 'color': 'blue' }">
{{ student.grade }}</td>
<td ng-switch-when="C" ng-style="{ 'color': 'orange' }">
{{ student.grade }}</td>
<td ng-switch-when="D" ng-style="{ 'color': 'red' }">
{{ student.grade }}</td>
<td ng-switch-default>{{ student.grade }}</td>
</tr>
</tbody>
</table>
<script src="angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Page 10 of 22
Enrollment Number : _______________ Subject : Modern Practical Tools
Name : __________________________ Subject Code : 4340705
Practical – 6
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.
<html ng-app="myApp">
<head>
<title>AngularJS Student List</title>
<script src="angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
<h2>Student List</h2>
<form>
<label>Name:</label>
<input type="text" ng-model="newStudent.name"><br>
<label>Age:</label>
<input type="number" ng-model="newStudent.age"><br>
<label>Grade:</label>
Page 11 of 22
Enrollment Number : _______________ Subject : Modern Practical Tools
Name : __________________________ Subject Code : 4340705
<input type="text" ng-model="newStudent.grade"><br>
<button ng-click="addStudent()">Add Student</button>
</form>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Grade</th>
<th>Action</th>
</tr>
<tr ng-repeat="student in studentList">
<td>{{ student.name }}</td>
<td>{{ student.age }}</td>
<td>{{ student.grade }}</td>
<td><button ng-
click="deleteStudent(student)">Delete</button></td>
</tr>
</table>
<script>
Page 12 of 22
Enrollment Number : _______________ Subject : Modern Practical Tools
Name : __________________________ Subject Code : 4340705
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.studentList = [
{ name: "John", age: 20, grade: "A" },
{ name: "Jane", age: 21, grade: "B" },
{ name: "Jim", age: 19, grade: "C" }
];
$scope.newStudent = {};
$scope.addStudent = function() {
$scope.studentList.push({
name: $scope.newStudent.name,
age: $scope.newStudent.age,
grade: $scope.newStudent.grade
});
$scope.newStudent = {};
};
Page 13 of 22
Enrollment Number : _______________ Subject : Modern Practical Tools
Name : __________________________ Subject Code : 4340705
$scope.deleteStudent = function(student) {
var index = $scope.studentList.indexOf(student);
$scope.studentList.splice(index, 1);
};
});
</script>
</body>
</html>
Output :
Page 14 of 22
Enrollment Number : _______________ Subject : Modern Practical Tools
Name : __________________________ Subject Code : 4340705
Practical – 7
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.
Practical – 8
Design a student registration page using template driven form approach
and utilize different form and controls level ng validation classes.
<html>
<head>
<title>Student Registration</title>
<script src="angular.min.js"></script>
</head>
<body ng-app="">
<h2>Student Registration Form</h2>
<form name="studentForm" ng-submit="submitForm()" novalidate>
<div>
<label>Name:</label>
<input type="text" name="name" ng-model="student.name" required>
<div ng-show="studentForm.name.$dirty && studentForm.name.$invalid">
Page 15 of 22
Enrollment Number : _______________ Subject : Modern Practical Tools
Name : __________________________ Subject Code : 4340705
<span ng-show="studentForm.name.$error.required">
Name is required.</span>
</div>
</div>
<div>
<label>Email:</label>
<input type="email" name="email" ng-model="student.email" required>
<div ng-show="studentForm.email.$dirty && studentForm.email.$invalid">
<span ng-show="studentForm.email.$error.required">Email is required.</span>
<span ng-show="studentForm.email.$error.email">
Invalid email address.</span>
</div>
</div>
<div>
<label>Phone:</label>
<input type="tel" name="phone" ng-model="student.phone" required>
<div ng-show="studentForm.phone.$dirty && studentForm.phone.$invalid">
<span ng-show="studentForm.phone.$error.required">
Phone is required.</span>
</div>
</div>
<div>
<label>Gender:</label>
<select name="gender" ng-model="student.gender" required>
Page 16 of 22
Enrollment Number : _______________ Subject : Modern Practical Tools
Name : __________________________ Subject Code : 4340705
<option value=""></option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<div ng-show="studentForm.gender.$dirty && studentForm.gender.$invalid">
<span ng-show="studentForm.gender.$error.required">Gender is
required.</span>
</div>
</div>
<div>
<button type="submit" ng-disabled="studentForm.$invalid">Submit</button>
</div>
</form>
<script>
function studentController($scope) {
$scope.submitForm = function() {
if ($scope.studentForm.$valid) {
alert("Student registered successfully.");
};
</script>
</body>
Page 17 of 22
Enrollment Number : _______________ Subject : Modern Practical Tools
Name : __________________________ Subject Code : 4340705
</html>
Practical – 9
Design component to enter faculty details like Code, Name, Email,
Type, Faculty Status (Active, Inactive), Subjects Teaching (with option
to add multiple subjects dynamically) using reactive form with various
types of validation of form and controls.
Step 1 : Import the necessary modules in your component.ts file.
Input 1 :
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormArray } from '@angular/forms';
Step 2 : Define the form group and its controls
Input 2 :
export class FacultyFormComponent implements OnInit {
facultyForm: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.facultyForm = this.fb.group({
code: ['', Validators.required],
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
Page 18 of 22
Enrollment Number : _______________ Subject : Modern Practical Tools
Name : __________________________ Subject Code : 4340705
type: ['', Validators.required],
status: ['', Validators.required],
subjects: this.fb.array([]),
});
get subjects(): FormArray {
return this.facultyForm.get('subjects') as FormArray;
addSubject() {
this.subjects.push(this.fb.control(''));
Step 3 : Define the HTML template for the form
Input 3 :
<form [formGroup]="facultyForm">
<div>
<label for="code">Code:</label>
<input type="text" id="code" formControlName="code">
<div *ngIf="facultyForm.get('code').invalid &&
facultyForm.get('code').touched" class="error">
Code is required.
Page 19 of 22
Enrollment Number : _______________ Subject : Modern Practical Tools
Name : __________________________ Subject Code : 4340705
</div>
</div>
<div>
<label for="name">Name:</label>
<input type="text" id="name" formControlName ="name">
<div *ngIf="facultyForm.get('name').invalid &&
facultyForm.get('name').touched" class="error">
Name is required.
</div>
</div>
<div>
<label for="email">Email:</label>
<input type="text" id="email" formControlName="email">
<div *ngIf="facultyForm.get('email').invalid &&
facultyForm.get('email').touched" class="error">
Email is required and must be a valid email address.
</div>
</div>
<div>
<label for="type">Type:</label>
<select id="type" formControlName="type">
<option value="" disabled>Select type</option>
Page 20 of 22
Enrollment Number : _______________ Subject : Modern Practical Tools
Name : __________________________ Subject Code : 4340705
<option value="Full-time">Full-time</option>
<option value="Part-time">Part-time</option>
</select>
<div *ngIf="facultyForm.get('type').invalid &&
facultyForm.get('type').touched" class="error">
Type is required.
</div>
</div>
<div>
<label for="status">Status:</label>
<select id="status" formControlName="status">
<option value="" disabled>Select status</option>
<option value="Active">Active</option>
<option value="Inactive">Inactive</option>
</select>
<div *ngIf="facultyForm.get('status').invalid &&
facultyForm.get('status').touched" class="error">
Status is required.
</div>
</div>
<div formArrayName="subjects">
Page 21 of 22
Enrollment Number : _______________ Subject : Modern Practical Tools
Name : __________________________ Subject Code : 4340705
<div *ngFor="let subject of subjects.controls; let i=index">
<input type="text" [formControlName]="i">
Practical – 10
Design a page to implement Add to Cart functionality using
decorators, custom properties, custom events of component
communication
Page 22 of 22
