1. What is difference between Angular JS & Angular?

Ans: - AngularJS is a JavaScript-based open-source front-end framework that is largely used

to create single-page applications on the web. Angular is a popular platform, typescript, and
an open-source web application framework designed by Google for creating mobile and
desktop web applications.
Angular JS: - It only supports JavaScript. Angular: - It support both JavaScript &
TypeScript.
This framework has a model-view-controller architecture. This framework has a
component based architecture. (component based architecture is faster than mvc
architecture.)
It does not have CLI tool(CLI is a command-line interface tool that you use to initialize
and develope Angular Applications.). It has CLI tool.(with easily creates with services,
component and other things in template)
It does not use DI. It uses DI.(DI is very good Design Pattern)
It does not support mobile browser. It also support mobile browser.
It is not so fast.(thats why google replace it with Angular) It is very fast.(because of
its data binding technique and component based architecture.)

2. What is Angular?
Ans: - Angular is an open source, JavaScript front-end framework to build Client Side
Applications.
It is completely written in typescript.
It is developed in Single Page Applications.(sidebar tsach rahto to change hot nhi.)
mhnje page reload hot nhi.
It is maintained by Google.
It is designed for web, desktop, and mobile platforms.

3. What is Angular Advantage?

Ans: - It is Relatively Simple to build Single Page Applications.
To make flexible and structured applications.
It is Cross platform and open source.
Reusable code (create code at one place and use it at many places).
It is good for Testability. (spec.ts)
4. Explain features of Angular?
DOM:-
TypeScript:- Angular is written in TypeScript. It is a superset of javascript. TypeScript
is install on NPM package & command is npm install -g typescript.
Data Binding:-
Testing:- Angular uses Jasmine to run various tests. The Jasmine framework allows
various functionalities to write different kinds of tests cases. Karma is the task-runner for the
tests.

5. What is SPA ? ( Single Page Application )

Ans :- A SPA is an app That doesn't need to reload or refresh the page during its use and
works within a Web Browser.
ex. Facebook, Map, Gmail, Twitter, Google Drive, GitHub

6. What is Angular CLI tools?

Ans :- Angular CLI is a Command-Line Interface tool that you use to initialize and develope
Angular Applications.

7. Angular CLI Setup?

Ans:- Go to Google cli.angular.io is the official website of angular cli
1. npm install -g @angular/cli

3. What is Building component on angular application ? :- component, directive, services,

pipes

3. What are Components in Angular?

Ans:- Component is an Entity which is used to interact with the end user. As the component
is going to interact with the end user it contains the front-end as well as it contents the
backend also. so it contents a view as well as it contents the controller.
View is managed by 2 file one is .html file and other is .css.
Controller is managed by only 1 file i.e. .ts file. That ts file contents a class that class
contents a logic which is used to controll a view.
 Angular framework is a component base fronted framework.
Components are main building block of an Angular App.
Without components we cannot build a proper angular app.
The Component is a combination of data html template and logics.
The Component are loads inside the browser.

3. Generate Component in Angular CLI ? ng g c post

4. What is String interpolation in Angular? {{ name }} (html page ke upr dyanamic

data ko display krne ke liye use hota hai)
Ans :- By using the concept of Interpolation the .html file of the component can access the
contents from its corresponding .ts file.
To use the concept of interpolation we have to use pair of corrly bracket({{}}).
String interpolation in Angular is used to bind data from component class to its
corresponding view template. That means, data flow from component to view.
ts file to html file we use string interpolation {{}}. function sudha add kru shakto
{{ getSlogan() }}. fun je return krel ti value ynar.

4. What we can do with Interpolation?

i.Property. ii. method. iii. arithmatic operation. iv. match{{title == "blog"}} agr cond shi hogi
to true return krega. v. <h1 class={{title}}></h1> ye bhi kr skte hai

4. What we cannot do with Interpolation?

i. agr ts file mai title = "blog" hai aur aap html file {{title="hello"}} mtlb title value change nhi
kr skte.(failed to compile).
ii. {{ typeof title}} type check nhi kr skte.
iii. increment or decrement nhi kr skte. {{data++}}.
iv. new keyword use nhi kr skte. {{new title}}
5. What is difference between Observables and Promises? (https://youtu.be/P-
kl0VoHj_k)
Ans :- Observables are lazy and Promises are not lazy(eager). Promises execute immediately
once after it is created, but Observables will not execute until we subscribe to them. ex.
this.myObservable.subscribe(data=>{console.log(data);}) (Observable sathi subscribe lihava
lagt tevvach te run hot)
Observable is cancellable using unsubscribe method but promise is not cancellable.
that means, in observable we can a subscription and we can cancel the subscription.
Observable can be synchronous or asynchronous, but Promises are always
asynchronous.
Observable are having 3 callbacks(Success, Error, Complete).Promises is having Only
2 callbacks(Success & Error).
Observable emits multiple values over a period of time, but promise emits only one
value.
Observable also suppports few rxjs operation like map, filter, reduce, retry etc.
(import { filter } from 'rxjs/operators') but Promise don't support these operators.
Promise is native to javascript so we don't need to import with are anyware. but
Observable are not a part of js not a part of angular its a separete library rxjs.(npm install
rxjs and then import { Observable } from 'rxjs')

6. What are the Directives in Angular?

Ans:- The concept of directives is used to provide the specific exicution direction for the html
elements.
Their are 3 types of directives.
i. Structural directives(Inbuilt directives)
ii. Custom directives
iii. Attribute Directives

i. Structural directives :- Structural directives are used to change the existing structure of an
html file.
By using the structural directives we can add the basic logical part into our html file.
Their are 3 structural directives
a. ngIf :-
b. ngFor :-
c. ngSwitch :-
ex. <h1 *ngIf="true"></h1>

ii. Custome Directives :- We can create our own directive which will add the functionality to
the element of html.(tumhala jsa pahije tsa directive tyar krn)
like the custom pipe we can create the custom directive.
By using the concept of custome directive the html elements gets updated based on
the logic.
ng generate directive directive_name:- 2 file genaret hotat .ts & .spec.ts and 1 file update
hoti hai app.module.ts

iii. Attribute Directives:- Attribute Directives listen to and modify the behaviour of other
Html elements, attribute, properties, and components.
Attribute directives are :-
a. NgClass:- Adds and remove a set of CSS classes.
b. NgStyle:- Adds and remove a set of HTML styles.
c. NgModel:- Adds two-way data binding to an HTML form element

7. What is Angular Material?

Ans:- Angular Material is a UI Component Library of Prebuild angular components.

8. What is AOT (Ahead Of Time) compilation?

Ans:- AOT Compilation is Compile at build time & its good for the PRODUCTION. (ng build --
aot)

8. Diff bet JIT & AOT ?

Ans:-
Compile at runtime in the Browser.---Compile at build time.
Larger Angular bundel files size.---Smaller Angular bundel files size.
Detect template errors later at runtime.---Detect template errors earlier at compile time.
Its Less Security & Performance.---Its Better Security & Performance.
Good for the DEVELOPMENT.---Good for the PRODUCTION.

9. What is Data Binding? How many ways in which it can be done? {{}}
Ans: - Data Binding in Angular allows us to communicate between a component class & its
corresponding View template. (mhnje aapn .ts file madhe class chya aata madhi variable
define krto aani to variable aapn html file madhe use krto. {{ data }}).

*** Data Binding is of 2 types ***

i. One Way Data Binding(The Data throws in only one direction) :- It is, when we can access a
component class property in its corresponding view template. & this can be achieve by
String interpolation({{data}}) of Property Binding([property] = data) in Angular. ( Bind the
data from component to the view. it is a uni directional. )
It is also, when we can access a value from view template in corresponding
component class property. & this can be achieve in Event Binding((data)="expression") in
Angular.
This
a. String Interpolation - {{title}}
b. Property Binding - [src]
c. Class Binding - [class.text-red]
d. Style Binding - [style.backgroundColor]
all this data binding are included into the One Way data Binding categories

ii. Two Way Data Binding :- It's binds data from component class to view template & view
template to component class. This is a combination of property binding & event Binding. (It
is a Bidirectional) syntax is [(ngModel)]

9. What is Property Binding?

Ans :- It is used to bind the property of an HTML element to the property or method of a
component class.
It is one way data Binding Where data flow from Component class to View template.

9. What is Event Binding?

Ans :- It is allows us to bind Webpage events to a components property or methods. Using
event Binding we can pass Data from View template to Component class.

10. What is mean by Pipe in Angular?

Ans :- PIPES in Angular :- The concept of pipes is used to transform the data from one form
to another form.
Their are 2 types of pipes in Angular as :-
1. Inbuilt pipe :- jo tyani tyar krun dila pipe ghya aani vapra. Separate command dyachi grj
pdt nhi. CommonModule madhe te tyar aahet.
2. Custom pipe :- tumhala jsa pahije tsa crete kra ani tyacha tsa vapr kra. command chi grj
pdti.(ng generate pipe pipe_name). he command vaprlyannantr aaplyala 2 file tyar krun
bhetat pipe chi .ts .spec.ts..
Jevva jevva ts file tyar hote tevva spec.ts file tyar hotech except module chi file. karan
ts file chya aat madhi code asto aani tya code la test krnyasathi spec.ts file lagte.
Just like the component we can create our own pipe.
*** string, currency, date, json, number pipes

11. What are the commands which are used to create component, Service,
Pipe and Directive?
Ans:- ng generate component component_name, ng generate service, ng generate pipe, ng
generate directive

12. Explain Project Structure of Angular Application?

Ans:- Angular 17 i. ng new Demo (It will generate 0 file 0 folder)
1. node_modules :- This folder contains all the project dependencies in the format of
modules.
Inside this folder their are sub folders which contains .ts files or .js files.
In future when we install any third party liberary then it gets install in node_modules
folder.
2. src :- This folder contains the actual source code of the angular project.
3. angular.json :- This file contains the project dependencies and the information about the
project.
4. package.json :- This file contains all the information about the project like name of the
project, its version, its dependencies.
5. tsconfig.json :- This is a configuration file which contains all the configuration details of the
typescript compiler(tsc).
6. index.html :- It is consider as an entry point for the part of code which is responsible to
display the contains on screen.(front end)
7. main.ts :- It is consider as an entry point for such a code which gets exicuted in the
backend.
8. styles.css :- This is a global styling file which contains the css part.
The css part is responsible to display the html containts in better way.
9. favicon.ico :- angular logo(jo browser vr disto to)
10. app folder :- It is the folder for root module in our angular project
11. Angular Components :- component is a major building block of an angular project.
which is responsible to interact with the end-user.

* Angular Modules :- Angular Modules is consider as a container which is used to group

components,directives,pipes,services.
The concept of modules is used to group related things under a single folder.

.html contains the code which is used to display on it on browsers window.

.css contains the code used to decorate the html contains
.ts file contains the code which gets exicuted when the user interacts with the components.
.spec.ts file contains the code used for unit testing purpose.

13. What is the process called by which typescript code gets converted into
javascript code?
Ans:- Its Transpiling process.
14. Why typescript is used in Angular instead of javascript?
Ans:- TypeScript is more readable and maintainable than JavaScript.
TypeScript supports abstraction through interfaces, while JavaScript does not.
TypeScript supports both static and dynamic typing. Loosely typed. JavaScript
supports only dynamic typing.