Angular Interview Questions For Beginners

1. What is Angular? Why was it introduced?

Angular was introduced to create Single Page applications. This framework brings structure
and consistency to web applications and provides excellent scalability and maintainability.
Angular is an open-source, JavaScript framework wholly written in TypeScript. It uses
HTML's syntax to express your application's components clearly.

2. What is TypeScript?
TypeScript is a superset of JavaScript that offers excellent consistency. It is highly
recommended, as it provides some syntactic sugar and makes the code base more
comfortable to understand and maintain. Ultimately, TypeScript code compiles down
to JavaScript that can run efficiently in any environment.

3. What is data binding? Which type of data binding does

Angular deploy?
Data binding is a phenomenon that allows any internet user to manipulate Web page
elements using a Web browser. It uses dynamic HTML and does not require complex
scripting or programming. We use data binding in web pages that contain interactive
components such as forms, calculators, tutorials, and games. Incremental display of a
webpage makes data binding convenient when pages have an enormous amount of data.
Angular uses the two-way binding. Any changes made to the user interface are reflected in
the corresponding model state. Conversely, any changes in the model state are reflected in
the UI state. This allows the framework to connect the DOM to the Model data via the
controller. However, this approach affects performance since every change in the DOM has
to be tracked.

Top Companies look for these Angular skills!

Upskill today with Angular Basics!ENROLL NOW

4. What are Single Page Applications (SPA)?

Single-page applications are web applications that load once with new features just being
mere additions to the user interface. It does not load new HTML pages to display the new
page's content, instead generated dynamically. This is made possible through JavaScript's
ability to manipulate the DOM elements on the existing page itself. A SPA approach is faster,
thus providing a seamless user experience.

5. Differentiate between Angular and AngularJS

The following table depicts the aspects of Angular vs AngularJS in detail:

Feature AngularJS Angular

Language JavaScript TypeScript

Supports Model-View-Controller
Architecture Uses components and directives
design

Mobile support Not supported by mobile browsers Supports all popular mobile browsers

Dependency
Doesn’t support Supports
Injection

@routeProvider is used to provide @Route configuration is used to define

Routing
routing information routing information

Difficult to manage with an increase Better structured, easy to create and

Management
in source code size manage bigger applications

6. What are decorators in Angular?

Decorators are a design pattern or functions that define how Angular features work. They
are used to make prior modifications to a class, service, or filter. Angular supports four types
of decorators, they are:
Class Decorators
Property Decorators
Method Decorators
Parameter Decorators

7. Mention some advantages of Angular.

Some of the common advantages of Angular are -
MVC architecture - Angular is a full-fledged MVC framework. It provides a firm opinion on
how the application should be structured. It also offers bi-directional data flow and updates
the real DOM.
Modules: Angular consists of different design patterns like components, directives, pipes,
and services, which help in the smooth creation of applications.
Dependency injection: Components dependent on other components can be easily worked
around using this feature.
Other generic advantages include clean and maintainable code, unit testing, reusable
components, data binding, and excellent responsive experience.

8. What are the new updates with Angular10?

Older versions of TypeScript not supported - Previous versions of Angular supported

typescript 3.6, 3.7, and even 3.8. But with Angular 10, TypeScript bumped to TypeScript 3.9.
Warnings about CommonJS imports - Logging of unknown property bindings or element
names in templates is increased to the "error" level, which was previously a "warning"
before.
Optional strict setting - Version 10 offers a stricter project setup when you create a new
workspace with ng new command.
ng new --strict
NGCC Feature - Addition of NGCC features with a program based entry point finder.
Updated URL routing
Deprecated APIs - Angular 10 has several deprecated APIs.
Bug fixes - With this Angular 10 version, there have been a number of bug fixes, important
ones being the compiler avoiding undefined expressions and the core avoiding a migration
error when a nonexistent symbol is imported.
New Default Browser Configuration - Browser configuration for new projects has been
upgraded to outdo older and less used browsers.

9. What are Templates in Angular?

Angular Templates are written with HTML that contains Angular-specific elements and
attributes. In combination with the model and controller's information, these templates are
further rendered to provide a dynamic view to the user.

10. What are Annotations in Angular?

Annotations in Angular are used for creating an annotation array. They are the metadata set
on the class that is used to reflect the Metadata library.

11. What are Directives in Angular?

Directives are attributes that allow the user to write new HTML syntax specific to their
applications. They execute whenever the Angular compiler finds them in the DOM. Angular
supports three types of directives.
Component Directives
Structural Directives
Attribute Directives

12. What is an AOT compilation? What are its advantages?

The Ahead-of-time (AOT) compiler converts the Angular HTML and TypeScript code into
JavaScript code during the build phase, i.e., before the browser downloads and runs the
code.
Some of its advantages are as follows.
Faster rendering
Fewer asynchronous requests
Smaller Angular framework download size
Quick detection of template errors
Better security

13. What are Components in Angular?

Components are the basic building blocks of the user interface in an Angular application.
Every component is associated with a template and is a subset of directives. An Angular
application typically consists of a root component, which is the AppComponent, that then
branches out into other components creating a hierarchy.

These Angular skills get you job in top companies!

Improve your skills right now with Angular Basics!ENROLL NOW

14. What are Pipes in Angular?

Pipes are simple functions designed to accept an input value, process, and return as an
output, a transformed value in a more technical understanding. Angular supports several
built-in pipes. However, you can also create custom pipes that cater to your needs.
Some key features include:
Pipes are defined using the pipe “|” symbol.
Pipes can be chained with other pipes.
Pipes can be provided with arguments by using the colon (:) sign.

15. What is the PipeTransform interface?

As the name suggests, the interface receives an input value and transforms it into the
desired format with a transform() method. It is typically used to implement custom pipes.
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({

name: 'demopipe'

})

export class DemopipePipe implements PipeTransform {

transform(value: unknown, ...args: unknown[]): unknown {

return null;

16. What are Pure Pipes?

These pipes are pipes that use pure functions. As a result of this, a pure pipe doesn't use any
internal state, and the output remains the same as long as the parameters passed stay the
same. Angular calls the pipe only when it detects a change in the parameters being passed.
A single instance of the pure pipe is used throughout all components.

17. What are Impure Pipes?

For every change detection cycle in Angular, an impure pipe is called regardless of the
change in the input fields. Multiple pipe instances are created for these pipes. Inputs passed
to these pipes can be mutable.
By default, all pipes are pure. However, you can specify impure pipes using the pure
property, as shown below.
@Pipe({

name: 'demopipe',

pure : true/false
})

export class DemopipePipe implements PipeTransform {

18. What is an ngModule?

NgModules are containers that reserve a block of code to an application domain or a
workflow. @NgModule takes a metadata object that generally describes the way to compile
the template of a component and to generate an injector at runtime. In addition, it
identifies the module's components, directives, and pipes, making some of them public,
through the export property so that external components can use them.

19. What are filters in Angular? Name a few of them.

Filters are used to format an expression and present it to the user. They can be used in view
templates, controllers, or services. Some inbuilt filters are as follows.
date - Format a date to a specified format.
filter - Select a subset of items from an array.
Json - Format an object to a JSON string.
limitTo - Limits an array/string, into a specified number of elements/characters.
lowercase - Format a string to lowercase.

20. What is view encapsulation in Angular?

View encapsulation defines whether the template and styles defined within the component
can affect the whole application or vice versa. Angular provides three encapsulation
strategies:
Emulated - styles from the main HTML propagate to the component.
Native - styles from the main HTML do not propagate to the component.
None - styles from the component propagate back to the main HTML and therefore are
visible to all components on the page.

21. What are controllers?

AngularJS controllers control the data of AngularJS applications. They are regular JavaScript
Objects. The ng-controller directive defines the application controller.

22. What do you understand by scope in Angular?

The scope in Angular binds the HTML, i.e., the view, and the JavaScript, i.e., the controller. It
as expected is an object with the available methods and properties. The scope is available
for both the view and the controller. When you make a controller in Angular, you pass the
$scope object as an argument.

23. Explain the lifecycle hooks in Angular

In Angular, every component has a lifecycle. Angular creates and renders these components
and also destroys them before removing them from the DOM. This is achieved with the help
of lifecycle hooks. Here's the list of them -
ngOnChanges() - Responds when Angular sets/resets data-bound input properties.
ngOnInit() - Initialize the directive/component after Angular first displays the data-bound
properties and sets the directive/component's input properties/
ngDoCheck() - Detect and act upon changes that Angular can't or won't detect on its own.
ngAfterContentInit() - Responds after Angular projects external content into the
component's view.
ngAfterContentChecked() - Respond after Angular checks the content projected into the
component.
ngAfterViewInit() - Respond after Angular initializes the component's views and child views.
ngAfterViewChecked() - Respond after Angular checks the component's views and child
views.
ngOnDestroy - Cleanup just before Angular destroys the directive/component.

24. What is String Interpolation in Angular?

String Interpolation is a one-way data-binding technique that outputs the data from
TypeScript code to HTML view. It is denoted using double curly braces. This template
expression helps display the data from the component to the view.
{{ data }}

25. What are Template statements?

Template statements are properties or methods used in HTML for responding to user
events. With these template statements, the application that you create or are working on,
can have the capability to engage users through actions such as submitting forms and
displaying dynamic content.
For example,
<button (click)="deleteHero()">Delete hero</button>
The template here is deleteHero. The method is called when the user clicks on the button.