1.What is Angular and why should we use it.

Explain
Angular is a TypeScript-based open-source full-stack web application framework developed by
Google and Microsoft. It's a client-side framework used to build Single Page Applications (SPA) —
web apps that load a single HTML page and dynamically update it as the user interacts.

 Angular is now one of the most popular open-source front-end web application frameworks
 Angular is completely based on Components
 It is completely written in Typescript & Developed by Google+Microsoft 
 Angular is a cross platform language. It supports multiple platforms. You can build different
types of apps by using Angular.
 It is used to create Desktop applications,Mobile applications ,web applications.
 Angular is amazingly fast and provides a great performance

Why Use Angular?

 Component-based Architecture – Breaks UI into smaller, reusable parts.

 TypeScript Support – Enables better tooling and maintainability.

 Two-way Data Binding – Synchronizes model and view instantly.

 Fast & Responsive – Updates only the changed part of the page.

 Cross-platform – Can be used for Web, Mobile, and Desktop apps.

 Built-in Tools – Routing, HTTPClient, Forms, etc., out of the box.

Example of SPA: Gmail.

2. Write and explain all steps involved in creation of an angular application.

Angular is a TypeScript-based front-end framework used to build Single Page Applications (SPA). To
develop and run Angular apps smoothly, there are several steps involved in setting up the
environment and creating a project.

🔹 1. Install Node.js and npm

Angular requires Node.js and npm (Node Package Manager) for installing packages and running the
project.

 Check if Node.js is installed:

nginx

node -v

If it returns a version, Node.js is installed.

 If not installed, download it from: https://nodejs.org

npm comes with Node.js and is used to manage Angular packages.

🔹 2. Install Angular CLI

Angular CLI (Command Line Interface) is a powerful tool to:

 Create Angular projects

 Add features

 Serve, build, test and deploy apps

Install CLI globally using npm:

nginx

npm install -g @angular/cli

 Check version:

css

ng --version

 CLI command structure:

bash

ng <command> [options]

🔹 3. Create a New Angular Application

Use the Angular CLI to create a new project:

ng new my-app

This will:

 Create the project folder my-app

 Set up basic structure and configuration

 Install all dependencies (node_modules)

During setup, it asks:

 Whether to add Angular routing

 Which CSS style format to use (CSS, SCSS, Sass, Less)

After completion, it creates folders like:

 src/ – source code

 app/ – contains main application logic

 angular.json – configuration file

🔹 4. Open the Project in Visual Studio Code

Visual Studio Code (VS Code) is a popular code editor for Angular.

 Open the project using command:

cd my-app

code .

Here, you can view and modify files like:

 app.component.ts – component logic

 app.component.html – UI template

 app.module.ts – application module

🔹 5. Serve the Angular Application

To run the application locally:

nginx

ng serve -o

 ng serve builds the app and starts the dev server.

 -o opens the app in your default browser.

 By default, it runs at:arduino

http://localhost:4200

As you make changes in code, the server automatically reloads and reflects changes in the browser.

🔹 6. Folder and File Structure

Some important folders and files created:

 src/app/app.component.ts – Component logic (TypeScript)

 src/app/app.component.html – Component UI (HTML)

 src/app/app.component.css – Styling

 src/app/app.module.ts – Root module of the application

 angular.json – CLI configuration

 package.json – Lists dependencies

🔹 7. Add More Components

After project setup, you can create more components using:

ng generate component component-name

# OR
ng g c component-name

Angular will generate:

 .ts, .html, .css, and .spec.ts files

 Auto update the app.module.ts file

3. What are components & modules in Angular. How to create them. Explain.
 Components

Components are the key features of Angular. The whole application is built using different
components. They make your complex application into reusable parts which you can reuse very
easily.

Angular is a SPA (Single Page Application) framework, and a view is made of one or more
components. An Angular component represents a portion of a view.

🔸 An Angular Component = HTML Template + Component Class + Component Metadata

🔹 HTML Template

HTML template is a regular HTML file with additional Angular-specific syntax to communicate with
the component class.

🔹 Component Class (TypeScript)

This is a TypeScript class that contains properties and methods.

 Properties hold data

 Methods define logic and operations

This class is compiled into JavaScript during build.

🔹 Component Metadata (Decorator)

Metadata is extra information used by Angular to run the component, such as:

 selector

 template URL

 style URLs
It is defined using the @Component decorator.

 How to Generate a Component Using CLI

Use Angular CLI to generate a new component:

ng generate component <component-name>

# or shorthand

ng g c <component-name>

Example:

ng g c greet

This command will generate:

 greet.component.ts – contains logic (class + metadata)

 greet.component.html – contains the HTML template

 greet.component.css – styles for the component

 greet.component.spec.ts – unit testing file

 Modules

Modules are containers for related components, directives, pipes, and services.

They help organize an application into cohesive blocks of functionality.

 Angular apps start with a root module: app.module.ts

 It contains:

o All necessary imports

o Declarations of components

o Bootstrap of the main/root component

@NgModule({

declarations: [AppComponent],

imports: [BrowserModule],

bootstrap: [AppComponent]

})

export class AppModule { }

 You can create feature modules as your app grows in size.

4. a) What is data binding. What are various data binding techniques

available.
4b) Explain about property binding and attribute binding

Property Binding

 It is used to bind a DOM property to a component class property.

 One-way: From component → HTML.

 Uses square brackets [].

Syntax:

<tag [property]="componentProperty"></tag>
Example:

<h1 [innerText]="title"></h1>

<button [disabled]="isDisabled">Click</button>

export class AppComponent {

title = "Angular Property Binding";

isDisabled = true;

 title is bound to innerText of <h1>

 isDisabled is bound to disabled property of <button>

✅ Attribute Binding

 Used to bind HTML attributes that don't have DOM properties (e.g., aria-*, role, colspan,
data-*)

 Uses: [attr.attributeName]="expression"

Syntax:

<tag [attr.attributeName]="value"></tag>

Example:

<p [attr.data-id]="itemId">Product</p>

export class AppComponent {

itemId = 101;

Here, data-id="101" will be added to the <p> element dynamically.

✅ Key Differences Between Property and Attribute Binding

Property Binding Attribute Binding

Binds to DOM properties Binds to HTML attributes

Uses [property] Uses [attr.attribute]

Property Binding Attribute Binding

Preferred for most dynamic UI Useful for non-standard/custom attributes

Angular checks property type No property exists, so sets attribute directly