Scribd
Upload
38 views5 pages

Week 11 - AWAD

AWT assignment

Uploaded by

Deepak Kumbhar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
38 views5 pages

Week 11 - AWAD

AWT assignment

Uploaded by

Deepak Kumbhar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Week 11 – Advance Web development

Q1) Discuss about different types of Data binding in Angular.

Ans: - Data binding in Angular is a powerful mechanism that allows communication between a
component's class (the TypeScript code) and its template (the HTML). Angular provides several types
of data binding to cater to different use cases. These types include:

Interpolation:

Syntax: {{ expression }}

Description: Interpolation allows you to embed expressions within double curly braces in the
template. It evaluates the expression and updates the DOM with the resulting value.

Example:

<h1>{{ title }}</h1>

export class AppComponent {

title = 'Hello, Angular!';

Property Binding:

Syntax: [property]="expression"

Description: Property binding enables you to bind data from the component to an HTML property. It
uses square brackets to bind the component property to the HTML attribute.

Example:

<img [src]="imageUrl" />

export class AppComponent {

imageUrl = 'path/to/image.jpg';

Attribute Binding:

Syntax: [attr.attribute-name]="expression"

Description: Attribute binding is used to bind data to an HTML attribute that is not a property of an
element. This is useful for attributes like aria-*, role, etc.

Example:
<button [attr.aria-label]="ariaLabel">Click me</button>

export class AppComponent {

ariaLabel = 'Accessible button';

Class Binding:

Syntax: [class.class-name]="expression"

Description: Class binding lets you add or remove CSS classes conditionally.

Example:

<div [class.active]="isActive">Content</div>

export class AppComponent {

isActive = true;

Style Binding:

Syntax: [style.style-property]="expression"

Description: Style binding allows you to set inline styles conditionally.

Example:

<div [style.background-color]="bgColor">Styled Content</div>

export class AppComponent {

bgColor = 'lightblue';

Event Binding:

Syntax: (event)="handler"

Description: Event binding is used to listen for and respond to DOM events. It uses parentheses
around the event name to bind an event to a method in the component.

Example:

<button (click)="handleClick()">Click me</button>

export class AppComponent {

handleClick() {
console.log('Button clicked!');

Two-way Data Binding:

Syntax: [(ngModel)]="property"

Description: Two-way data binding combines property and event binding to synchronize data
between the component class and the template. It uses the ngModel directive inside a banana-in-a-
box syntax [()].

Example:

<input [(ngModel)]="name" />

<p>Hello, {{ name }}!</p>

export class AppComponent {

name = 'Angular';

These types of data binding offer a flexible and efficient way to manage the flow of data between the
component class and the template, ensuring that the user interface is always in sync with the
underlying data model.

Q2) Discuss about CLI to create one application in ANGULAR.

Ans: - Creating an Angular application using the Angular CLI (Command Line Interface) is a
straightforward and efficient process. The Angular CLI provides a powerful set of commands to
scaffold, develop, and maintain Angular applications. Here’s a step-by-step guide on how to create an
Angular application using the Angular CLI:

Step 1: Install Angular CLI

First, you need to install the Angular CLI globally on your system. You can do this using npm (Node
Package Manager). Open your terminal or command prompt and run the following command:

npm install -g @angular/cli

Step 2: Create a New Angular Application

Once the Angular CLI is installed, you can create a new Angular application using the ng new
command followed by the name of your application. For example, to create an application named
my-angular-app, run:
ng new my-angular-app

The CLI will prompt you to select several configuration options:

Would you like to add Angular routing? (Yes/No)

Which stylesheet format would you like to use? (CSS, SCSS, SASS, LESS, Stylus)

Answer these prompts based on your preferences. The CLI will then generate a new directory named
my-angular-app with the initial project structure and dependencies.

Step 3: Navigate to Your Application Directory

Change into the newly created application directory:

cd my-angular-app

Step 4: Serve the Application

To serve the application locally and start a development server, use the ng serve command:

ng serve

By default, the application will be available at http://localhost:4200/. Open this URL in your web
browser to see your new Angular application running.

Step 5: Explore the Project Structure

The Angular CLI sets up a project with a well-defined structure. Here are some key directories and
files you’ll find:

• src/: Contains the source code of your application.


• app/: The main application module and components.
• assets/: Static assets such as images and stylesheets.
• environments/: Configuration for different environments (e.g., development and
production).
• index.html: The main HTML file.
• main.ts: The main entry point of the application.
• styles.css: Global styles for the application.
• angular.json: Configuration file for Angular CLI.
• package.json: Manages npm dependencies and scripts.
• tsconfig.json: TypeScript configuration.

Step 6: Generate Components, Services, and More

The Angular CLI provides commands to generate components, services, modules, and other Angular
entities. For example, to generate a new component called my-component, use:
ng generate component my-component

Or, you can use the shorthand command:

ng g c my-component

Similarly, to generate a service called my-service:

ng generate service my-service

Or, shorthand:

ng g s my-service

Step 7: Build the Application for Production

To build the application for production, use the ng build command:

ng build --prod

This command compiles the application into an optimized, minified output in the dist/ directory,
ready for deployment.

Additional CLI Commands

• ng test: Runs unit tests.


• ng lint: Runs code linter.
• ng e2e: Runs end-to-end tests.
• ng add [package]: Adds support for external libraries (e.g., ng add @angular/material).

You might also like