9. Angular and MongoDBs

Angular and MongoDBs

1.      Angular Application Setup

Observe the link http://localhost:4200/welcome on which the mCart 

application is running. 

 

2.      Components and Modules

Create a new component called hello and render Hello Angular on the 

Page

 

3.      Elements of Template

Add an event to the hello component template and when it is clicked, it should 

change the courseName.

 

4.      ngFor Create a courses array and rendering it in the template using ngFor directive in a list format

 

5.      ngClass

Apply multiple CSS classes to the text using ngClass directive.

 

6.      Built in Pipes

Display the product code in lowercase and product name in uppercase 

using built-in pipes.

7.      Template Driven Form

Create a course registration form as a template-driven form.

8.      Write MongoDB queries to Create and drop databases and collections

 

9.      Write MongoDB queries to perform CRUD operations on document using insert(), find(), update() and sort()

10.  Install MongoDB on the local computer. Install MongoDB Server, MongoDB Shell and test connectivity


Comments

Post a Comment

Popular posts from this blog

1. a. Angular Application Setup

Observe the link http://localhost:4200/welcome on which the mCart application is running. Perform the below activities to understand the features of the application. Angular Application Setup: Install Node.js: Visit the Node.js website ( https://nodejs.org ) and download the latest version of Node.js. Follow the installation instructions specific to your operating system. PRebuilt software (2nd Pane) Install Angular CLI: Open a terminal or command prompt and run the following command to install the Angular CLI globally: npm install -g @angular/cli@13.0 Create a new Angular project: In the terminal or command prompt, navigate to the desired directory where you want to create your Angular project. Run the following command to create a new project named "mCart": ng new mCart Change into the project directory: Move into the newly created project directory by running the following command: cd mCart Serve the application: Start a local development server and s...
Read more

2. Structural Directives - ngIf

 2.a  Structural Directives - ngIf Create a login form with username and password fields. If the user enters the correct credentials, it should render a "Welcome <<username>>" message otherwise it should render "Invalid Login!!! Please try again..." message Step 1: Generate a new component ng generate component login step 2: Update the login component template Open the login.component.html file and replace its content with the following code: <div *ngIf="isLoggedIn; else loginForm"> <h2>Welcome {{ username }}!</h2> </div> <ng-template #loginForm> <form (ngSubmit)="submitForm()"> <div> <label for="username">Username:</label> <input type="text" id="username" name="username" [(ngModel)]="username" required> </div> <div> <label for="password">Password:</label>...
Read more