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:

  1. 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)

  1. 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 serve the Angular application by running the following command:

ng serve


The application will be accessible at http://localhost:4200.

1.b. Components and Modules
Create a new component called hello and render Hello Angular on the page

To create a new component called "hello" and render "Hello Angular" on the page in an Angular application, follow these steps:

  1. Open a terminal or command prompt.

  2. Navigate to the root directory of your Angular project.

  3. Run the following command to generate the new component:

ng generate component hello

This command creates a new folder called "hello" with the necessary files for the component.

  1. Open the hello.component.ts file located in the hello folder. This file defines the TypeScript code for the component.

  2. Replace the existing code in hello.component.ts with the following:

import { Component } from '@angular/core'; @Component({ selector: 'app-hello', template: '<h1>Hello Angular</h1>', }) export class HelloComponent {}


  1. Open the app.component.html file located in the src/app folder. This file is the main template file for the application.

  2. Replace the existing code in app.component.html with the following:

<app-hello></app-hello>

  1. Save the changes to both files.

  2. Run the Angular development server if it's not already running by executing the following command in the terminal:

ng serve

Open a web browser and navigate to http://localhost:4200. You should see "Hello Angular" rendered on the page.

1.c. : Elements of Template
Add an event to the hello component template and when it is clicked, it should change
the courseName.


To add an event to the hello component template in Angular, which changes the courseName when clicked, follow these steps:

  1. Open the hello.component.ts file located in the hello folder.

  2. Update the code in hello.component.ts as follows:

import { Component } from '@angular/core'; @Component({ selector: 'app-hello', template: ` <h1>Hello Angular</h1> <p>Course Name: {{ courseName }}</p> <button (click)="changeCourseName()">Change Course Name</button> `, }) export class HelloComponent { courseName: string = "Introduction to Angular"; changeCourseName() { this.courseName = "Advanced Angular Concepts"; } }


  1. In the template section of the component, we have added a paragraph (<p>) element that displays the courseName using interpolation ({{ courseName }}). Below that, we added a button element with an event binding (click)="changeCourseName()".

  2. Inside the component class, we declared the courseName variable and initialized it with the initial course name.

  3. We also added the changeCourseName() method, which is called when the button is clicked. Inside this method, we update the courseName to the new value.

  4. Save the changes to the hello.component.ts file.

  5. Run your Angular development server if it's not already running by executing the following command in the terminal:

ng serve


  1. Open a web browser and navigate to http://localhost:4200. You should see the "Hello Angular" message along with the initial courseName displayed.

  2. Click the "Change Course Name" button, and you will see the courseName value being updated to "Advanced Angular Concepts" on the page.


1.d. Module Name: Change Detection
progressively building the PoolCarz application

To progressively build the PoolCarz application and understand how change detection works in Angular, you can follow these steps:

  1. Create a new Angular project: Open a terminal or command prompt, navigate to the desired directory, and run the following command to create a new Angular project named "PoolCarz":
ng new PoolCarz

Change into the project directory: Move into the newly created project directory by running the following command:

cd PoolCarz

Generate a new component: Run the following command to generate a new component named "car-list":

ng generate component car-list

This command will create a new folder called "car-list" with the necessary files for the component.

  1. Open the car-list.component.ts file located in the car-list folder. This file defines the TypeScript code for the component.

  2. Replace the existing code in car-list.component.ts with the following:

import { Component } from '@angular/core'; @Component({ selector: 'app-car-list', template: ` <h2>Available Cars</h2> <ul> <li *ngFor="let car of cars">{{ car }}</li> </ul> <button (click)="addCar()">Add Car</button> `, }) export class CarListComponent { cars: string[] = ['Car A', 'Car B', 'Car C']; addCar() { const newCar = `Car ${this.cars.length + 1}`; this.cars.push(newCar); } }

  1. Open the app.component.html file located in the src/app folder. This file is the main template file for the application.

  2. Replace the existing code in app.component.html with the following:

<h1>PoolCarz Application</h1> <app-car-list></app-car-list>


  1. Save the changes to both files.

  2. Run the Angular development server if it's not already running by executing the following command in the terminal:

ng serve

  1. Open a web browser and navigate to http://localhost:4200. You should see the "PoolCarz Application" heading along with the "Available Cars" heading and the initial car list displayed.

  2. Click the "Add Car" button, and you should see a new car added to the list without a full page reload. This demonstrates the concept of change detection in Angular, where the UI is automatically updated when the underlying data (the cars array) changes.




Comments

Post a Comment

Popular posts from this blog

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

Assignments - 1

      1) A) Angular Application Setup          Observe   the   link   http://localhost:4200/welcome   on   which   the   mCart             application   is   running.       B)     Elements   of   Template Add   an   event   to   the   hello   component   template   and   when   it   is   clicked,   it   should   change the   courseName. 2)  A)    Components   and   Modules  Create   a   new   component   called   hello   and   render   Hello   Angular   on   the   Page B)     ngFor  Create a courses array and rendering it in the template using ngFor directive in               a list format 3)  ...
Read more