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
