ANGULAR INTERVIEW QUESTIONS
1. What is a framework ?
Framework is a pre-written or pre defined code that facilitates the application development,
rather than a library framework has a special environment (structure) to develop applications
2. What is Angular ?
Angular is a Javascript web application framework which is developed and maintained by Google
mainly it is used to develop single page applications, angular works on typescript and the current
version of angular is 17
3. What is a single page application(SPA) ?
Single page application is a website where all the functionality of the website exist in single html
template, as users access different application features browser renders the different
components without rendering or refreshing the entire application
4. Difference between [Link] and Angular
[Link] Angular
i) [Link] is first version of Angular i) The latest version of angular is 17
ii) [Link] completely works on JS ii) Angular works on TS
iii) [Link] follows MVC design pattern iii) follows components and views
iv) It doesn't have dependency injection iv) Angular has DI
5. What is difference between Angular and React
Angular React
i) Angular developed by Google i) React by Facebook ii) Angular
completely works on TS ii) it works on JS
iii) It has own environment for app development iii) we need to have 3rd party tools
iv) Angular updates single view at a time iv) updates multiple views at a time
6. How does an Angular app work?
Angular app has many files, here is the important files of angular app while execution
[Link] : [Link] has all the configuration of angular application is stored
[Link] : [Link] is used to store all the versions of dependencies that required
[Link] : it bootstrap all the components and services together and it is the first file to be
compiled by compiler
[Link]: It is the only template in angular app, it is the first file to be served in browser
[Link]: it is a global stylesheet of angular application
Angular application has node modules folder where all the supported packages libraries being
stored
7. What is Component in Angular ?
The components are basic building of angular application which has 4 files
• [Link]
• [Link]
• [Link]
• [Link]
All these 4 files linked together in @component decorator, and we can reuse a component by
using selector of component
8. What is Data binding in Angular ?
Data binding is the communication between the template and typescript code
● we have two types of data bindings in Angular
i) One way data binding ii)
Two way data binding
● One way data binding: In one way data binding the communication is the only one way
either html to typescript to html
One way data binding has 3 types i) String interpolation ii) Property binding
iii) Event binding
● Two data binding : It is the process of synchronizing the data between model and
presentation layer at a time
9. What is a pipe ?
Angular pipes are used to transform the data, we can denote by using bar ( | ), Pipes must be
used in String Interpolation only
10. What are the advantages of angular over other frameworks?
● Angular supports two-way data binding
● Angular follows MVC architecture
● Angular has both static and regular templates
● Angular has support for restful web services
● Angular supports dependency injection
● Angular supports default data validation
● Angular supports communication between user and server
11. What are the directives in Angular
Directives is used to change the behavior structure or appearance of the DOM elements
We have 3 types of directives
i) Structural directive ii)
Attribute directive iii)
Component directive
Structural directive : It is used to change/manipulate structure of DOM elements in the template
it starts with * and it is 3 types *ngIf, *ngFor, ngSwitch
Attribute directive : It is used to change the appearance of DOM elements, we have two types
of attribute directives ngStyle, ngClass
Component directive : It is used in components and it defines how a component should be
processed, it has @component decorator to define selector, stylesURL, templatesURL to link
the files of component
12. What is dependency injection ?
Dependency Injection is the design pattern to inject dependencies into component to holds
the execution of methods in runtime, we can perform dependency injection in component level
constructor with private variable, the private variable facilitates the commutes between services
and component
13. What is the use of services ?
Services are the injectable classes to integrate with templates to use server side
code. Services are common logic or data to be shared between components by performing DI
Services can have the methods to be used to share/receive the data to/from REST API
14. What is routing in Angular? How do you implement it?
Routing in Angular allows navigation between different parts of the application based on the
URL. It is implemented using the Angular Router module. Routes are defined in the AppModule
or in separate routing modules, and the RouterOutlet directive is used to specify where the
routed components should be displayed.
15. What is Angular's HttpClient module? How do you use it to make HTTP
requests?
Angular's HttpClient module is used to send HTTP requests and receive responses from a server.
It provides methods like get(), post(), put(), delete(), etc., to make different types of HTTP
requests. HttpClientModule should be imported into the AppModule to use HttpClient.
16. What is a module in Angular ?
Angular module is a place where we can group the components, pipes directives and services
here [Link] is the place where we can group everything
17. Explain the concept of Angular decorators. Give examples.
Angular decorators are functions that modify JavaScript classes. They are used to provide
metadata to Angular, which Angular uses to process and configure the class. Examples include
@Component, @Injectable, @NgModule, etc
18. What is the use of ngModel in Angular?
ngModel is used to fetch the data between template and typescript ot work with ngModel we
need to import formsModule in imports section of [Link], ngModel can be using with in
parentheses inside of brackets [()]
19. Explain different life cycle hooks ?
Lifecycle hooks are methods that Angular calls at certain points in the lifecycle of a component
or directive
ngOnInit : It is used to execute a piece of code when the component is initialized in the template
ngOnChanges : It is used to execute a piece of code when the user changes something in the
template like entering the data in input tag or selecting the option in dropdown
ngDoCheck : It is used to execute a piece of code for every change in the project
ngOnDestroy : ngOnDestroy execute a piece of code, when the component view is destroyed
20. Explain JIT in Angular ?
JIT (Just-In-Time) compilation in Angular involves compiling the application in the user's
browser at runtime, enabling rapid development iterations but resulting in larger bundle sizes
and slight runtime overhead.
21. What is lazy loading in Angular? How do you implement it?
Lazy loading in Angular is a technique used to load modules asynchronously when they are
needed. It improves the initial loading time of the application by only loading essential modules
upfront. Lazy loading is implemented by configuring routes with loadChildren property in the
RouterModule.
22. How to create custom pipes in angular?
To create custom pipes in angular the command is “ng g p pipename” , This command will
create 2 files in the [Link] file the class will be annotated with “@pipe” and it has a transform
method to read the input and returns the transformed value.
23. How to create the routing after creating the project?
To create routing after creating a project the command is “ng g m [Link]” –routing,
it will create one file called [Link]. there we need to create the routing for
different paths in the routes array.
24. Difference between href and Router link?
Both are used to create navigation among the different components in angular app but
href will refresh the webpage while router link will render the webpage for new
components.
25. How to create production ready angular application?
After completing the development process we can type “ng build” in the project folder.
This command will create a folder called “dist”, in the dist folder we have another folder
with the name of the project name, we publish that folder.
26. What is Observable in Angular?
Observables are a key part of handling asynchronous operations, primarily used for data
streams in scenarios like HTTP requests, user interactions, or data updates. Observables
are a feature of RxJS (Reactive Extensions for JavaScript), which Angular uses extensively
for reactive programming.
An Observable is a data source that can emit multiple values over time, unlike a Promise
which only resolves once. Observables work on the concept of "observing" data streams,
meaning you can subscribe to an Observable to receive values as they arrive.
27. What is different route guards in Angular?
In Angular, route guards are used to control access to routes based on certain
conditions, such as authentication, authorization, or unsaved changes. They
implement specific interfaces that allow us to write logic that determines whether a
route can be accessed or exited, making them valuable for protecting routes and
maintaining a smooth user experience.
1. CanActivate Guard: Determines if a user can navigate to a specific route.
2. CanActivateChild Guard: Determines if a user can access child routes of a specific
route.
3. CanDeactivate Guard: Determines if a user can leave a route, often used to check if
there are unsaved changes.
28. What is the use of @Input and @Output annotation?
In Angular, input and output annotations are decorators used in components to facilitate
communication between a parent and child component. They enable passing data and events
back and forth in a structured way.
@Input Decorator: The @Input decorator is used to pass data from a parent component to a
child component.
@Output Decorator: The @Output decorator is used to emit events from a child component to
a parent component