Questions I

Question 1

What is data binding? Which type of data binding does Angular deploy?

Answer 1

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.

Question 2

What are Single Page Applications (SPA)?

Answer 2

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.

Question 3

What are decorators in Angular?

Answer 3

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

Question 4

Library vs framework

Answer 4

Library as a tool you use to do a specific job, like a hammer or a screwdriver. A framework, on the other hand, is more like a set of blueprints for building a house

Question 5

What are Directives in Angular?

Answer 5

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
-ngClass
-ngStyle
-ngModel

Structural Directives
Attribute Directives

Question 6

What is an AOT compilation? What are its advantages?

Answer 6

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

Question 7

What are Pipes in Angular?

Answer 7

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:

1. Pipes are defined using the pipe “|” symbol.
2. Pipes can be chained with other pipes.
3. Pipes can be provided with arguments by using the colon (:) sign.

Question 8

What are Pure Pipes?

Answer 8

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.

Question 9

What are Impure Pipes?

Answer 9

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.

Question 10

What is an ngModule?

Answer 10

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.

Question 11

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

Answer 11

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.

Question 12

Explain the lifecycle hooks in Angular

Answer 12

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.

Question 13

What is String Interpolation in Angular?

Answer 13

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 }}

Question 14

What is the difference between AOT and JIT?

Answer 14

Ahead of Time (AOT) compilation converts your code during the build time before the browser downloads and runs that code. This ensures faster rendering to the browser. To specify AOT compilation, include the –aot option with the ng build or ng serve command.

The Just-in-Time (JIT) compilation process is a way of compiling computer code to machine code during execution or run time. It is also known as dynamic compilation. JIT compilation is the default when you run the ng build or ng serve CLI commands.

Question 15

Explain the @Component Decorator.

Answer 15

TypeScript class is one that is used to create components. This genre of class is then decorated with the “@Component” decorator.

The decorato’s purpose is to accept a metadata object that provides relevant information about the component.

The image above shows an App component - a pure TypeScript class decorated with the “@Component” decorator.

The metadata object that gets accepted by the decorator provides properties like templateUrl, selector, and others, where the templateUrL property points to an HTML file defining what you see on the application.

-selector
-template
-style

Question 16

What are Services in Angular?

Answer 16

Angular Services perform tasks that are used by multiple components.

These tasks could be data and image fetching, network connections, and database management among others.

They perform all the operational tasks for the components and avoid rewriting of code. A service can be written once and injected into all the components that use that service.

Question 17

Template-driven approach

Answer 17

In this method, the conventional form tag is used to create forms. Angular automatically interprets and creates a form object representation for the tag.

Controls can be added to the form using the NGModel tag.

Multiple controls can be grouped using the NGControlGroup module.

A form value can be generated using the “form.value” object. Form data is exported as JSON values when the submit method is called.

Basic HTML validations can be used to validate the form fields. In the case of custom validations, directives can be used.

Arguably, this method is the simplest way to create an Angular App.

Question 18

Reactive Form Approach

Answer 18

This approach is the programming paradigm oriented around data flows and propagation of change.

With Reactive forms, the component directly manages the data flows between the form controls and the data models.

Reactive forms are code-driven, unlike the template-driven approach.

Reactive forms break from the traditional declarative approach.

Reactive forms eliminate the anti-pattern of updating the data model via two-way data binding.

Typically, Reactive form control creation is synchronous and can be unit tested with synchronous programming techniques.

Question 19

Template-driven approach- keys diferences

Answer 19

validations: directives
data flow: asynchronus
data model: Unstructured and mutable
Setup of form model: Implicit, created by directives

Question 20

Reactive

Answer 20

validations: Functions
data flow: Synchronous
data model: Structured and immutable
Setup of form model: Explicit, created in component class

Question 21

Common form foundation classes

Answer 21

Both reactive and template-driven forms are built on the following base classes.

FormControl Tracks the value and validation status of an individual form control.

FormGroup Tracks the same values and status for a collection of form controls.

FormArray Tracks the same values and status for an array of form controls.

ControlValueAccessor Creates a bridge between Angular FormControl instances and built-in DOM elements.

Question 22

Setup in reactive forms

Answer 22

With reactive forms, you define the form model directly in the component class.

The [formControl] directive links the explicitly created FormControl instance to a specific form element in the view, using an internal value accessor.

html:
<input type=”text” [formControl]=”favoriteColorControl”
ts:
favoriteColorControl = new FormControl(‘’);

Question 23

Setup in template-driven forms

Answer 23

In template-driven forms, the form model is implicit, rather than explicit. The directive NgModel creates and manages a FormControl instance for a given form element.

html:
<input type=”text” [(ngModel)]=”favoriteColor”>

ts:
favoriteColor = ‘’;

Question 24

What is Eager and Lazy loading?

Answer 24

Eager loading is the default module-loading strategy.

Feature modules under Eager loading are loaded before the application starts. This is typically used for small size applications.

Lazy loading dynamically loads the feature modules when there’s a demand. This makes the application faster. It is used for bigger applications where all the modules are not required at the start of the application.

Question 25

What type of DOM does Angular implement?

Answer 25

DOM (Document Object Model) treats an XML or HTML document as a tree structure in which each node is an object representing a part of the document.

Angular uses the regular DOM. This updates the entire tree structure of HTML tags until it reaches the data to be updated. However, to ensure that the speed and performance are not affected, Angular implements Change Detection.

Question 26

Explain the concept of dependency injection.

Answer 26

Dependency injection is a technique used to create loosely coupled code.

It allows pieces of code to be reused without the need for hard-coded dependencies.

This makes code more maintainable and easier to test. Dependency injection is often used in frameworks like AngularJS, ReactJS, and VueJS. It is also possible to use dependency injection in vanilla JavaScript. To use dependency injection in JavaScript, you need a dependency injection library. There are many different libraries available, but they all work in basically the same way.

Question 27

Explain MVVM architecture

Answer 27

MVVM architecture is an architectural pattern used mainly in software engineering. It stands for Model-View-ViewModel. MVVM is a variation of the traditional MVC (Model-View-Controller) software design pattern.

The main difference between the two is that MVVM separates the user interface logic from the business logic, while MVC separates the data access logic from the business logic.

This separation of concerns makes it easier to develop, test, and maintain software applications.

Question 28

What is transpiling in Angular?

Answer 28

Transpiling in Angular refers to the process of converting TypeScript code into JavaScript code that web browsers can execute.

Angular applications are built using TypeScript, a superset of JavaScript that adds static typing and additional features to the language. Since browsers can only run JavaScript, the TypeScript code needs to be transpiled into JavaScript before it can be executed.

This is typically done using the TypeScript compiler (tsc) or build tools like Angular CLI.

Question 29

What are HTTP interceptors?

Answer 29

HTTP interceptors in Angular are a feature that allows you to intercept HTTP requests and responses globally.

Interceptors provide a way to modify or handle HTTP requests and responses at a centralized location before they reach the server or client.

This can be useful for logging requests, adding authentication headers, handling errors, or modifying request/response data. Interceptors can be registered in the Angular module and are executed in a specific order based on the request/response pipeline.

Question 30

What is Change Detection, and how does the Change Detection Mechanism work?

Answer 30

Change Detection in Angular is a mechanism that determines when and how to update the user interface based on changes in the application’s data model.

Angular uses a tree of change detectors to track changes in component properties and update the DOM accordingly. When a change occurs, Angular performs a change detection process, which involves checking each component’s properties for changes and updating the DOM if necessary. The change detection mechanism keeps the UI in sync with the application’s data.

Question 31

What is a bootstrapping module?

Answer 31

A bootstrapping module in Angular is the main entry point of an Angular application.

It is responsible for starting the application and initializing the root component.

The bootstrapping module is typically defined in the main.ts file and is configured in the Angular AppModule. It sets up the necessary environment, loads required modules, and invokes the Angular platform to start the application.

The bootstrapping module plays a crucial role in the Angular application’s lifecycle.

Question 32

What exactly is a parameterized pipe?

Answer 32

A parameterized pipe in Angular is a pipe that accepts one or more arguments, also known as parameters.

Pipes transform data in Angular templates, and parameterized pipes allow you to customize the transformation based on specific requirements. By passing parameters to a pipe, you can modify its behavior and apply different transformations to the data.

Question 33

What are class decorators?

Answer 33

Class decorators in Angular are a type of decorator that can be applied to a class declaration. They are used to modify the behavior of the class or add additional functionality. Class decorators are defined using the @ symbol followed by the decorator name and are placed immediately before the class declaration. They can be used for various purposes, such as adding metadata, applying mixins, or extending the functionality of a class.

Question 34

What are Method decorators?

Answer 34

Method decorators in Angular are decorators that can be applied to methods within a class.

They are used to modify the behavior of the method or add additional functionality. Method decorators are defined using the @ symbol followed by the decorator name and are placed immediately before the method declaration.

They can be used for tasks like logging, caching, or modifying the method’s behavior based on specific conditions.

@HostListener()

Question 35

What are the key components of Angular?

Answer 35

Angular has the key components below,

Component: These are the basic building blocks of an Angular application to control HTML views.

Modules: An Angular module is a set of angular basic building blocks like components, directives, services etc. An application is divided into logical pieces and each piece of code is called as “module” which perform a single task.

Templates: These represent the views of an Angular application.

Services: Are used to create components which can be shared across the entire application.

Metadata: This can be used to add more data to an Angular class.

Question 36

What are directives?

Answer 36

Directives add behaviour to an existing DOM element or an existing component instance.

import { Directive, ElementRef, Input } from ‘@angular/core’;

@Directive({ selector: ‘[myHighlight]’ })
export class HighlightDirective {
constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = ‘yellow’;
}
}

Now this directive extends HTML element behavior with a yellow background as below

<p>Highlight me!</p>

-> Component Directives: These are basically Angular components (since they are built using the @Component decorator).
-> Structural Directives: They change the DOM structure by adding or removing elements (e.g., *ngIf, *ngFor).
-> Attribute Directives: They change the appearance or behavior of an element, component, or another directive (e.g., ngClass, ngStyle).

Question 37

What are the differences between Component and Directive?

Answer 37

In a short note, A component(@component) is a directive-with-a-template.

Question 38

Directive keys arguments

Answer 38

To register a directive we use @Directive meta-data annotation

Directives are used to add behavior to an existing DOM element

Directive is used to design re-usable components

Many directives can be used per DOM element

Directive doesn’t use View

Question 39

What is a module?

Answer 39

Modules are logical boundaries in your application and the application is divided into separate modules to separate the functionality of your application.

Lets take an example of app.module.ts root module declared with @NgModule decorator as below,

he NgModule decorator has five important (among all) options:

The imports option is used to import other dependent modules. The

BrowserModule is required by default for any web based angular application.

The declarations option is used to define components in the respective module.

The bootstrap option tells Angular which Component to bootstrap in the application.

The providers option is used to configure a set of injectable objects that are available in the injector of this module.

The entryComponents option is a set of components dynamically loaded into the view.

Question 40

What are lifecycle hooks available?

Answer 40

Angular application goes through an entire set of processes or has a lifecycle right from its initiation to the end of the application. The representation of lifecycle in pictorial representation as follows,

The description of each lifecycle method is as below,

ngOnChanges: When the value of a data bound property changes, then this method is called.

ngOnInit: This is called whenever the initialization of the directive/component after Angular first displays the data-bound properties happens.

ngDoCheck: This is for the detection and to act on changes that Angular can’t or won’t detect on its own.

ngAfterContentInit: This is called in response after Angular projects external content into the component’s view.

ngAfterContentChecked: This is called in response after Angular checks the content projected into the component.

ngAfterViewInit: This is called in response after Angular initializes the component’s views and child views.

ngAfterViewChecked: This is called in response after Angular checks the component’s views and child views.

ngOnDestroy: This is the cleanup phase just before Angular destroys the directive/component.

Question 41

What is a data binding?

Answer 41

Data binding is a core concept in Angular and allows to define communication between a component and the DOM, making it very easy to define interactive applications without worrying about pushing and pulling data.

There are four forms of data binding(divided as 3 categories) which differ in the way the data is flowing.

From the Component to the DOM:
From the DOM to the Component: Event binding
Two-way binding: Two-way data binding:

Question 42

What is angular CLI?

Answer 42

Angular CLI (Command Line Interface) is a command line interface to scaffold and build angular apps using nodejs style (commonJs) modules. You need to install using below npm command,

Question 43

What is the difference between constructor and ngOnInit?

Answer 43

The Constructor is a default method of the class that is executed when the class is instantiated and ensures proper initialisation of fields in the class and its subclasses.

Angular, or better Dependency Injector (DI), analyses the constructor parameters and when it creates a new instance by calling new MyClass() it tries to find providers that match the types of the constructor parameters, resolves them and passes them to the constructor.

ngOnInit is a life cycle hook called by Angular to indicate that Angular is done creating the component.

Mostly we use ngOnInit for all the initialization/declaration and avoid stuff to work in the constructor.

The constructor should only be used to initialize class members but shouldn’t do actual “work”. So you should use constructor() to setup Dependency Injection and not much else. ngOnInit() is better place to “start” - it’s where/when components’ bindings are resolved.

Question 44

What is a service?

Answer 44

A service is used when a common functionality needs to be provided to various modules. Services allow for greater separation of concerns for your application and better modularity by allowing you to extract common functionality out of components.