Expt.No: Page.

No:
Date:

EXPERIMENT-1:
Angular Development Environment Setup:
To develop an application using Angular on a local system, we need to set up a development
environment that includes the installation of:

 Node.js (^12.20.2 || ^14.15.5 || ^16.10.0) and npm (min version required 6.13.4)
Angular CLI
Visual Studio Code

First of all we need to Install Node.js and Visual Studio Code from their respective official websites.

Installation of Node.js:

Step-1: Downloading the Node.js „.msi‟ installer

The first step to install Node.js on windows is to download the installer. Visit the official Node.js
website i.e) https://nodejs.org/en/download/ and download the .msi file according to your system
environment (32-bit & 64-bit). An MSI installer will be downloaded on your system.

Step-2: Running the Node.js installer

Now you need to install the node.js installer on your PC. You need to follow the following steps for
the Node.js to be installed:-
Double click on the .msi installer.

The Node.js Setup wizard will open.

Welcome To Node.js Setup Wizard.

Select “Next”
Expt.No: Page.No:
Date:

 After clicking “Next”, End-User License Agreement (EULA) will open.

Check “I accept the terms in the License Agreement” Select “Next”

 Destination Folder

Set the Destination Folder where you want to install Node.js & Select “Next”
Expt.No: Page.No:
Date:

 Custom Setup

Select “Next”

 Ready to Install Node.js.

Select “Install”

NOTE :
A prompt saying – “This step requires administrative privileges” will appear.
Expt.No: Page.No:
Date:
Authenticate the prompt as an “Administrator”
 Installing Node.js.
Do not close or cancel the installer until the install is complete
 Complete the Node.js Setup Wizard.

Click “Finish”

Step 3: Verify that Node.js was properly installed or not.

To check that node.js and npm were completely installed on your system or not, you can run the
following commands in your command prompt or Windows Powershell and test it:-
C:\Users\Admin> node –v

C:\Users\Admin>npm -v

If node.js was completely installed on your system, the command prompt will print the version of
the node.js installed.
Step 4: Updating the Local npm version.
The final step in node.js installed is the updation of your local npm version(if required) – the
package manager that comes bundled with Node.js.
You can run the following command, to quickly update the npm
npm install npm –global // Updates the „CLI‟ client

Installation of VS Code:

Step 1: Visit the official website of the Visual Studio Code using any web browser like Google
Chrome, Microsoft Edge, etc.
Expt.No: Page.No:
Date:
Step 2: Press the “Download for Windows” button on the website to start the download of
the Visual Studio Code Application.

Step 3: When the download finishes, then the Visual Studio Code icon appears in the downloads
folder.

Step 4: Click on the installer icon to start the installation process of the Visual Studio Code.

Step 5: After the Installer opens, it will ask you for accepting the terms and conditions of the Visual
Studio Code. Click on I accept the agreement and then click the Next button.

Step 6: Choose the location data for running the Visual Studio Code. It will then ask you for
browsing the location. Then click on Next button.
Expt.No: Page.No:
Date:

Step 7: Then it will ask for beginning the installing setup. Click on the Install button.

Step 8: After clicking on Install, it will take about 1 minute to install the Visual Studio Code on your
device.
Expt.No: Page.No:
Date:

Step 9: After the Installation setup for Visual Studio Code is finished, it will show a window like this
below. Tick the “Launch Visual Studio Code” checkbox and then click Next.

Step 10: After the previous step, the Visual Studio Code window opens successfully. Now
you can create a new file in the Visual Studio Code window and choose a language of yours
to begin your programming journey!
Expt.No: Page.No:
Date:

So this is how we successfully installed Visual Studio Code on our Windows system.

Steps to install Angular CLI:

Angular CLI can be installed using Node package manager using the command shown below

Test successful installation of Angular CLI using the following command

Note: Sometimes additional dependencies might throw an error during CLI installation but still check
whether CLI is installed or not using the following command. If the version gets displayed, you can
ignore the errors.
Expt.No: Page.No:
Date:

Creation of first Angular Js application:

Create an application with the name 'MyApp' using the following CLI command

ng new filename

The above command will display two questions. The first question is as shown below screen short.
Typing 'y' will create a routing module file (app-routing.module.ts).

The next question is to select the stylesheet to use in the application. Select CSS and press Enter as
shown below:
Expt.No: Page.No:
Date:

This will create the following folder structure with the dependencies installed inside the
node_modules folder.

Type the following command to run the application. This will open a browser with the default port as
4200.

 ng serve will build and run the application

 --open option will show the output by opening a browser automatically with the default port.

 Use the following command to change the port number if another application is running
on the default port(4200)
Expt.No: Page.No:
Date:
1. D:\MyApp>ng serve --open --port 3000

Following is the output of the MyApp Application

Expt.No: Page.No:
Date:

EXPERIMENT-2:
Create a new component called hello and render Hello Angular on the page
Observe for our AppComponent you have below files

1. app.component.ts
2. app.component.html
3. app.component.css

In the same MyApp application created earlier, create a new component called hello using the
following CLI command

This command will create a new folder with the name hello with the following files placed inside it
Expt.No: Page.No:
Date:

Open hello.component.ts file and create a property called courseName of type string and initialize it
to "Angular".

Open hello.component.html and display the courseName.

Open hello.component.css and add the following styles for the paragraph element.

Open app.module.ts file and add HelloComponent to bootstrap property as shown below in Line 18
to load it for execution.
Expt.No: Page.No:
Date:

Open index.html and load the hello component by using its selector name i.e., app-hello as shown
below in Line 11

Now run the application by giving the following command.

Following is the output of the MyApp Application.

Expt.No: Page.No:
Date:
Expt.No: Page.No:
Date:

EXPERIMENT-3
Add an event to the hello component template and when it is clicked, it should
change the courseName.
1. Open hello.component.ts, add a method called changeName() Also, use external template
hello.component.html.

2. Open hello.component.html and add a paragraph and bind it with changeName() method as
shown below.

3. Save the files and check the output in the browser.

Expt.No: Page.No:
Date:
Expt.No: Page.No:
Date:

EXPERIMENT-4
Create a login form with username and password fields. If the user enters the correct
credentials, it should render a "Welcome <>" message otherwise it should render
"Invalid Login!!! Please try again..." message
1. Open app.component.ts and write the following code

2. Write the below-given code in app.component.html:

3. Add AppComponent to the bootstrap property in the root module file i.e., app.module.ts
Expt.No: Page.No:
Date:

4. Ensure the index.html displays app-root.

5. Save the files and check the output in the browser.

Expt.No: Page.No:
Date:
NK
Expt.No: Page.No:
Date:
EXPEERIMENT-5
Create a courses array and rendering it in the template using ngFor
directive in a list format
1. Write the below-given code in app.component.ts

2. Write the below-given code in app.component.html

.3 Save the files and check the output in the browser

NK
Expt.No: Page.No:
Date:
EXPERIMENT-6:
Display the correct option based on the value passed to ngSwitch directive.
1. Write the below-given code in app.component.ts

2. Write the below-given code in app.component.html

3. Save the files and check the output in the browser

Expt.No: Page.No:
Date:
Expt.No: Page.No:
Date:

EXPERIMENT-7:
Create a custom structural directive called 'repeat' which should repeat the element
given a number of times.
1.. Generate a directive called 'repeat' using the following command:

This will create two files under the src\app folder with names repeat.directive.ts
and repeat.directive.spec.ts (this is for testing). Now the app folder structure will look as shown below:

2. Write the below-given code in app.module.ts

3. Open the repeat.directive.ts file and add the following code

Expt.No: Page.No:
Date:

4. Write the below-given code in app.component.html

5. Save the files and check the output in the browser

Expt.No: Page.No:
Date:
EXPERIMENT-8:
Apply multiple CSS properties to a paragraph in a component using ngStyle.
1. Write the below-given code in app.component.ts

2. Write the below-given code in app.component.html

3. Save the files and check the output in the browser

Expt.No: Page.No:
Date:

EXPERIMENT-9:
Apply multiple CSS classes to the text using ngClass directive.
1.. Write the below-given code in app.component.ts

2. Write the below-given code in app.component.html

3. In app.component.css, add the following CSS class

4. Save the files and check the output in the browser

Expt.No: Page.No:
Date:

EXPERIMENT-10:Create an attribute directive called 'showMessage' which

should display the given message in a paragraph when a user clicks on it
and should change the text color to RED.

1. Generate a directive called 'message' using the following command

This will create two files under the src\app folder with the names message.directive.ts and
message.directive.spec.ts (this is for testing). Now the app folder structure will look as shown below:

2. Above command will add MessageDirective class to the declarations property

in the app.module.ts file

3. Open the message.directive.ts file and add the following code

Expt.No: Page.No:
Date:

4. Write the below-given code in app.component.html

5. Add the following code in app.component.ts

6. Add the following CSS styles to the app.component.css file

7. Save the files and check the output in the browser

Expt.No: Page.No:
Date:
Expt.No: Page.No:
Date:

EXPERIMENT-11:
Binding image with class property using property binding.
.1.Write the following code in app.component.ts as shown below

Create a folder named "imgs" inside src/assets and place a logo.png file inside it.

2. Write the following code in app.component.html as shown below

3. Save the files and check the output in the browser

Expt.No: Page.No:
Date:
Expt.No: Page.No:
Date:

EXPERIMENT:12
Binding colspan attribute of a table element to the class property.
1. Write the below-given code in app.component.ts

2. Write the below-given code in app.component.html

3. Save the files and check the output in the browser

Expt.No: Page.No:
Date:

EXPERIMENT-13:
Binding an element using inline style and user actions like entering text in input
fields
1. Write the below-given code in app.component.ts

2.Write the below-given code in app.component.html

3. Save the files and check the output in the browser

4.If we does not assign values to the isValid and isValid1 properties it will be set to red color and
26px by default because expression will become false.
Expt.No: Page.No:
Date:

Event Binding:

1. Write the below-given code in app.component.ts

2. Write the below-given code in app.component.html

3. Save the files and check the output in the browser

Expt.No: Page.No:
Date:
EXPERIMENT-14:
Mongo DB installation and configuration in windows.
MongoDB is an open-source document-oriented database that is designed to
store a large scale of data and also allows you to work with that data very
efficiently. It is categorized under the NoSQL(Not only SQL) database because
the storage and retrieval of data in MongoDB are not in the form of tables. This
is the general introduction of MongoDB now we learn how to install MongoDB
on your Windows?.
You can install MongoDB using two different methods one is using msi and
another is using zip. Here, we will discuss how to install MongoDB using msi, so
you need to follow each step carefully:
Step 1: Go to MongoDB Download Center to download MongoDB Community
Server.

Here, You can select any version, Windows, and package according to your
requirement. For Windows, we need to choose:
Version: 4.2.2

OS: WindowsOS
Package: msi
Step 2: When the download is complete open the msi file and click the next
button in the startup screen:
Step 3: Now accept the End-User License Agreement and click the next button:

Step 4: Now select the complete option to install all the program features.
Here, if you can want to install only selected program features and want to
select the location of the installation, then use the Custom option:
Step 5: Select “Run service as Network Service user” and copy the path of the
data directory. Click Next:

Step 6: Click the Install button to start the installation process:

Step 7: After clicking on the install button installation of MongoDB begins:

Step 8: Now click the Finish button to complete the installation process:

Step 9: Now we go to the location where MongoDB installed in step 5 in your

system and copy the bin path:

Step 10: Now, to create an environment variable open system properties <<
Environment Variable << System variable << path << Edit Environment variable
and paste the copied link to your environment system and click Ok:
Step 11: After setting the environment variable, we will run the MongoDB
server, i.e. mongod. So, open the command prompt and run the following
command:
mongod
When you run this command you will get an error i.e. C:/data/db/ not found.
Step 12: Now, Open C drive and create a folder named “data” inside this folder
create another folder named “db”. After creating these folders. Again open the
command prompt and run the following command:
mongod
Now, this time the MongoDB server(i.e., mongod) will run successfully.

Run mongo Shell

Step 13: Now we are going to connect our server (mongod) with the mongo
shell. So, keep that mongod window and open a new command prompt window
and write mongo. Now, our mongo shell will successfully connect to the
mongod.
Important Point: Please do not close the mongod window if you close this
window your server will stop working and it will not able to connect with the
mongo shell.
EXPERIMENT-15:
Write MongoDB queries to perform CRUD operations on
document using insert(), update(), remove()
I. Mongo DB insert documents from the collection
a. Insert single document
b. Insert multiple documents in collection
a. Insert single document
>Show dbs
Admin 0.000GB
Config 0.000GB
Local 0.000GB
>use mongodb
Switched db to mongodb
>db.createCollection(“emp”)
>show collections
emp
>db.emp.insert({“empname”:”xxxx”,”empdept”:”cse”,”empno.”:7456})
Write result({“n Inserted”:1})
b. Insert multiple documents in collection
>db.emp.insertMany([
{
“empname”: “xxxx”,
“empdept” : “cse”,
“empno”:7456
},
{
“empname”:”yyyy”,
“empdept”:”aiml”,
“empno”:4835
},
{
“empname”:”zzzz”,
“empdept”:”cse”,
“empno”:”5789
},
{
“empname”:”www”,
“empdept”:”cse”,
“empno”:9567
}
])

2.Mongo DB update document from a collection

Using update() method.
The update() method updates values in the existing document.
Syntax: >db.collection_name.update(selection_criteria,updated_data)
>db.emp.find()
{“_id”: ObjectId(“53846dgr93”), “empname”: “xxxx”, “empdept” : “cse”,
“empno”:7456}
{“_id”: ObjectId(“53846dgr94”), “empname”:”yyyy”, “empdept”:”aiml”,
“empno”:4835}
{“_id”: ObjectId(“53846dgr95”), “empname”:”zzzz”, “empdept”:”cse”,
“empno”:”5789}
{“_id”: ObjectId(“53846dgr96”) “empname”:”www”, “empdept”:”cse”,
“empno”:9567}

>db.emp.update({“empdept”:”aiml”},{$set:{“empdept”:”cse”}})
writeResult({“nmatched”:1, “nupserted”:0, “nmodified”:1})

>db.emp.find()
{“_id”: ObjectId(“53846dgr93”), “empname”: “xxxx”, “empdept” : “cse”,
“empno”:7456}
{“_id”: ObjectId(“53846dgr94”), “empname”:”yyyy”, “empdept”:”cse”,
“empno”:4835}
{“_id”: ObjectId(“53846dgr95”), “empname”:”zzzz”, “empdept”:”cse”,
“empno”:”5789}
{“_id”: ObjectId(“53846dgr96”) “empname”:”www”, “empdept”:”cse”,
“empno”:9567}

By default mongodb will update one single document, to updates multiple you
need to set a parameter “multi” to true.

>db.emp.find()
{“_id”: ObjectId(“53846dgr93”), “empname”: “xxxx”, “empdept” : “cad”,
“empno”:7456}
{“_id”: ObjectId(“53846dgr94”), “empname”:”yyyy”, “empdept”:”cad,
“empno”:4835}
{“_id”: ObjectId(“53846dgr95”), “empname”:”zzzz”, “empdept”:”cad”,
“empno”:5789}
{“_id”: ObjectId(“53846dgr96”) “empname”:”www”, “empdept”:”cad”,
“empno”:9567}
3. Mongo DB remove document from a collection:
Using remove() method.
Remove() method is used to remove document from collection.
Syntax: >db.collection_name.remove(deletion criteria)
>db.emp.remove({“empname”:”www”, “empdept”:”cad”,“empno”:9567})
writeResult({“nremoved”:1})

>db.emp.find()
{“_id”: ObjectId(“53846dgr93”), “empname”: “xxxx”, “empdept” : “cad”,
“empno”:7456}
{“_id”: ObjectId(“53846dgr94”), “empname”:”yyyy”, “empdept”:”cad,
“empno”:4835}
{“_id”: ObjectId(“53846dgr95”), “empname”:”uuuu”, “empdept”:”cad”,
“empno”:5789}
EXPERIMENT-16:
Write MongoDB queries to Create and drop databases and
collections.

>show dbs
Admin 0.000GB
Config 0.000GB
Local 0.000GB

>use mongodb
Switched db to mongodb

>db.createCollection(“emp”)
{“ok”:1}

>show collections
emp

>db.emp.insert({“empname”:”xxxx”,”empdept”:”cse”})
Write result({“n Inserted”:1})

>db.emp.drop()
True

Show collections

Nothing will appear ,because “emp” collection is deleted

EXPERIMENT-17:
Write MongoDB queries to work with records using limit(),
sort(), createIndex().

1.Limit():
If we want to display only specific list of documents we can use limit().
Syntax: >db.collection_name.find().limit()
If we have 3 documents in a collection . for example you want to display only 2,
we can use limit()
>db.emp.find().limit(2)
{“_id”: ObjectId(“53846dgr93”), “empname”: “xxxx”, “empdept” : “cad”,
“empno”:7456}
{“_id”: ObjectId(“53846dgr94”), “empname”:”yyyy”, “empdept”:”cad,
“empno”:4835}

2. Sort():
By using sort() method we can easily sort documents in a collection. While
sortimg specify the sorting under using 1 and -1 values.
i.e., 1 for ascending order.
-1 for descending order.
Syntax: db.collection_name.find().sort({data:values})
>db.emp.find().sort({“empname”:1})

{“_id”: ObjectId(“53846dgr95”), “empname”: “uuuu”, “empdept” : “cad”,

“empno”:5789}
{“_id”: ObjectId(“53846dgr93”), “empname”:”xxxx”, “empdept”:”cad,
“empno”:7456}
{“_id”: ObjectId(“53846dgr94”), “empname”:”yyyy”, “empdept”:”cad”,
“empno”:4835}
3.indexing:
indexing allows you to efficiently search data & retreving data. When we deal
with large collections & large documents. “Indexing” is necessary.

create index in mongo DB

we will create an index for searching specific word in a document. And
using “$search” for searching specific word.
It will display that specific word in all documents. We are using “text”
operator for this.
Syntax:
>db.emp.cretaeIndex({“empdept”:”text})
{
"createdCollectionAutomatically" : false,
"numIndexesBefore" : 1,
"numIndexesAfter" : 2,
"ok" : 1
}
Example:
>db.emp.find({$text:{$search: “finance”}}).pretty().