Angular Fundamentals

Question 1

What is Angular?

Answer 1

Angular is a platform and framework for building single-page client applications using HTML and TypeScript.
It provides a set of tools and libraries for routing, forms, HTTP client communication, and more, making it an all-in-one solution for building robust web applications.

Question 2

Explain the concept of components in Angular.

Answer 2

Components are the building blocks of an Angular application.

A component is a TypeScript class with a decorator that defines a view (HTML template), style (CSS or SCSS), and business logic.

Every Angular application has at least one root component, and components can be nested within each other to create a tree-like structure.

Question 3

What is the difference between Angular and AngularJS?

Answer 3

Architecture: Angular uses a component-based architecture, while AngularJS is MVC-based.

Language: Angular uses TypeScript, while AngularJS is based on JavaScript.

Performance: Angular has better performance due to features like AOT (Ahead-of-Time) compilation and a better change detection mechanism.

Mobile Support: Angular is designed with mobile support in mind, whereas AngularJS is not.

Question 4

What are services in Angular?

Answer 4

Services are used to create reusable business logic that can be shared across multiple components.

They are typically used for:
- data retrieval,
- handling HTTP requests,
- performing calculations.

Services are injected into components using Angular’s dependency injection (DI) system.

Question 5

What is dependency injection (DI) in Angular?

Answer 5

Dependency Injection is a design pattern in which a class asks for dependencies from external sources rather than creating them itself.
Angular’s DI framework allows developers to define and inject dependencies like services into components, making the code modular and easier to test.

Question 6

What is Angular CLI, and what are some of its main commands?

Answer 6

Angular CLI (Command Line Interface) is a tool that helps automate the development workflow in Angular projects. It offers commands like:

• ng new: Create a new Angular project.
• ng serve: Run the application in development mode.
• ng generate component <component-name>: Generate a new component.</component-name>
• ng build: Build the application for deployment.
• ng test: Run unit tests for the project.

Question 7

What is change detection in Angular?

Answer 7

Change detection is a mechanism by which Angular determines what changes have occurred in the data and updates the view accordingly.
Angular uses zones and a change detection strategy to optimize rendering by only updating the affected parts of the DOM.

Question 8

Explain the lifecycle hooks in Angular.

Answer 8

Angular components have a series of lifecycle hooks that provide visibility into the different stages of a component’s lifecycle:

• ngOnChanges(): Called when an input-bound property changes.
• ngOnInit(): Called once the component is initialized.
• ngDoCheck(): Called during every change detection run.
• ngAfterContentInit(): Called after content (ng-content) has been projected.
• ngAfterContentChecked(): Called after every check of the projected content.
• ngAfterViewInit(): Called after the component’s view has been fully initialised.
• ngAfterViewChecked(): Called after every check of the component’s view.
• ngOnDestroy: Called just before the component is destroyed.

Question 9

What is Angular’s Ahead-of-Time (AOT) Compilation?

Answer 9

AOT compilation is a process in which the Angular compiler converts Angular HTML and TypeScript code into efficient JavaScript code before the browser downloads and runs the application. This leads to faster rendering, fewer asynchronous requests, and better security.

Question 10

What are Angular modules?

Answer 10

Modules in Angular are containers that group components, directives, pipes, and services, making them cohesive blocks of functionality. Each Angular application has at least one module, the root module, which bootstraps the application. Other feature modules can be created to encapsulate functionality.

Question 11

What are observables, and how are they used in Angular?

Answer 11

Observables are used for handling asynchronous data streams and events in Angular. The HttpClient service, for example, returns observables when making HTTP requests. Observables can be subscribed to and used with operators such as map, filter, and mergeMap from the RxJS library to transform or combine data.

Question 12

How would you handle forms in Angular?

Answer 12

Angular provides two approaches to handling forms:

• Template-driven forms: Suitable for simple forms, managed using Angular directives such as ngModel.
• Reactive forms: Suitable for complex forms, managed programmatically using FormGroup, FormControl, and FormBuilder.

Question 13

What is lazy loading in Angular?

Answer 13

Lazy loading is a technique in which modules are loaded on demand rather than all at once. It reduces the initial load time of an application by only loading the required modules for a particular route. This is achieved using Angular’s router configuration.

Question 14

What is Angular Material?

Answer 14

Angular Material is a UI component library that follows Google’s Material Design principles. It provides pre-built, customisable components like buttons, cards, dialogs, and tables to enhance the UI and UX of Angular applications.

Question 15

What is a router in Angular?

Answer 15

Angular’s router is a tool that enables navigation between different views or pages of an application. It provides route configurations, route guards, and parameterised routes, making it easy to manage navigation and route changes in a single-page application.

Question 16

What are Templates in Angular?

Answer 16

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.

Question 17

What are Annotations in Angular?

Answer 17

Annotations in Angular create an annotation array. They are the metadata set in the class that reflects the metadata library.

Question 18

What are Directives in Angular?

Answer 18

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.

1. Component Directives
2. Structural Directives
3. Attribute Directives

Question 18

What are Pipes in Angular?

Answer 18

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 19

What is the PipeTransform interface?

Answer 19

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

Question 20

What are Pure Pipes?

Answer 20

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 21

What are Impure Pipes?

Answer 21

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 {

Question 22

What is an ngModule?

Answer 22

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 23

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

Answer 23

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 24

What is view encapsulation in Angular?

Answer 24

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:

1. Emulated - styles from the main HTML propagate to the component.
2. Native - styles from the main HTML do not propagate to the component.
3. None - styles from the component propagate back to the main HTML and therefore are visible to all components on the page.

Question 25

What are controllers?

Answer 25

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

Question 26

What do you understand by scope in Angular?

Answer 26

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.

Question 27

What is String Interpolation in Angular?

Answer 27

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 28

What are Template statements?

Answer 28

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.

Question 29

What are the chief components of Angular?

Answer 29

The main components are:

1. Component- Brings the modules together
2. Metadata- Adds more data to the Angular JS class
3. Modules- Breaks up the application into logical pieces of code, each module performing a single task
4. Service- Creates a component that can be shared across the whole application
5. Templates- Defines an Angular JS application’s views

Question 30

Name the three Module Arrays

Answer 30

1. Bootstrap array - Tells Angular which components to load so the functionality can be accessed
2. Export array - Sends out components, directives, and pipes to be used in other modules.
3. Import array - Brings in functionality from other Angular modules

Question 31

What’s an EventEmitter?

Answer 31

It’s a class in the Angular framework that emits custom events.

Question 32

Explain Routing.

Answer 32

Routing aids in directing users to different pages depending on what option they chose on the main page. Therefore, the required Angular Component that gets rendered to the user is determined by whatever option they chose.

Question 33

What does Cli stand for, and what does it do?

Answer 33

It stands for Command Line Interface and is used to create an Angular application. Additionally, it helps to create an application’s unit and end-to-end test.

Question 34

Describe Lazy Loading.

Answer 34

This is a technique where, instead of an entire web page being loaded and given to the user in one shot, only the wanted section gets loaded in, with the rest of content delayed until needed, if at all.

Question 35

Discuss the tsconfig.json file.

Answer 35

The file is used to provide the options for Typescript that will be used for an Angular project.

Question 36

How do you handle Angular application errors?

Answer 36

All Angular applications have an error handling option. Just include the ReactJS catch library, then use the catch function. The catch function, in turn, contains a link that sends you to the Error Handler function. When in the Error Handler Function, you send the error in question to the console, while also sending the error back to the main program in order to assure continued operation of the main program.

Once this is all in place, whenever an error arises in the future, it’ll be redirected to the browser’s error console.

Question 37

Define the role of a decorator in Angular.

Answer 37

Decorators identify an object type or class that has been created by the TypeScript as an Angular component. The decorators provide additional metadata that dictates how the component should be processed and used when it’s run.

Question 38

Can you convert a string into a date?

Answer 38

<div>

The date of this Tutorial is {{newdate | date:"MM/dd/yy"}}

</div>

Question 39

Common Decorators

Answer 39

• @NgModules() for modules
• @Component() to define components
• @Injectible() to define services
• @Pipe() to define pipes
• @Directives() to define directives
• @Input() for data flowing into a component (send data to the DOM)
• @Output() for data flowing out of a component (receive data from DOM)

Question 40

Standalone Component

Answer 40

Standalone components provide a simplified way to build Angular applications. They allow you to use files in your projects without assigning them to a module.

Question 41

NgModule imports

Answer 41

In Angular, NgModule imports are a key part of the module system. They allow you to make components, directives, pipes, and services from other Angular modules available to your module

• AppRoutingModule - gives us access to Angular’s page navigation features
• BrowserModule - all the low level infrastructure Angular needs in all projects
• CommonModule - has all Angular’s built-in pipes and directives
• HttpClientModule - gives us access to the HTTP client service for making fetch requests

Question 42

Template variables

Answer 42

Template reference variables or template variablesfor short, are a quick way to use datafrom one part of a template in other partsof the same template without having to pass that datainto the components controller class.

Question 43

Data binding

Answer 43

In Angular, data binding refers to the communication mechanism between the component’s class (TypeScript/logic) and its template (HTML/view).

Question 44

Types of data binding

Answer 44

There are four main types of data binding in Angular:
1. Interpolation (One-way Data Binding - Component to View)
2. Property Binding (One-way Data Binding - Component to View)
3. Event Binding (One-way Data Binding - View to Component)
4. Two-way Data Binding (Component to View and View to Component)

Question 45

Interpolation

Answer 45

Interpolation is the most basic form of data binding where data from the component class is displayed in the template. It’s achieved by using double curly braces ({{}}).

Usage: {{ expression }}

‘<h1>Hello, {{ name }}</h1>

Angular automatically updates the view whenever the value of the name property in the component changes.

Question 46

Property Binding

Answer 46

Property binding is used to bind component properties (or class fields) to HTML element properties, such as input values or attributes.

Usage: [property]=”expression”

‘<img [src]=”imageUrl” />’

The src attribute of the img tag is bound to the imageUrl property of the component.

Question 47

Event Binding

Answer 47

Event binding allows the template to send events or user actions (like clicks, keypresses, etc.) to the component class, which can handle the logic.

Usage: (event)=”handlerFunction($event)”

<button (click)=”onButtonClick()”>Click Me</button>

When the button is clicked, the onButtonClick method in the component is invoked.

Question 48

Two-way Data Binding

Answer 48

Two-way binding allows data to flow in both directions: from the component to the view and from the view back to the component. This is commonly used with forms.

Usage: [(ngModel)]=”property”

<input [(ngModel)]=”username” />

<p>Username: {{ username }}</p>

The input field is bound to the username property of the component. Any changes to the input field will update the component property, and vice versa.

Question 49

What are Angular Structural Directives?

Answer 49

Structural Directives in Angular are special types of directives that alter the structure of the DOM by adding or removing elements.

Structural directives are easily identifiable by the * prefix before the directive name in the template.

Question 50

Common Structural Directives in Angular.

Answer 50

*ngIf - Conditionally includes or excludes elements from the DOM based on a Boolean expression.

*ngFor - Iterates over a collection (like an array) and renders an element for each item.

*ngSwitch - Displays one element from a set of elements based on a match between the value of an expression and the cases defined.

Question 51

*ngIf

Answer 51

Conditionally includes or excludes elements from the DOM based on a Boolean expression.

‘<div *ngIf=”isLoggedIn”>Welcome, user!</div>’

Angular evaluates the expression inside *ngIf. If the expression is true, the element is created and added to the DOM. If it’s false, the element is not rendered, and if it was already present, it is removed.

Question 52

*ngFor

Answer 52

Iterates over a collection (like an array) and renders an element for each item.

‘<ul>
<li *ngFor=”let item of items”>{{ item }}</li>
</ul>’

Angular loops through the array or iterable provided in the expression and creates a template instance for each item in the collection, binding each one to the corresponding element in the template.

Question 53

*ngSwitch

Answer 53

Displays one element from a set of elements based on a match between the value of an expression and the cases defined.

‘<div [ngSwitch]=”color”>
<p *ngSwitchCase=”‘red’“>Color is red</p>
<p *ngSwitchCase=”‘blue’“>Color is blue</p>
<p *ngSwitchDefault>Color is unknown</p>
</div>’

Angular evaluates the expression bound to ngSwitch. It then displays the element with the matching ngSwitchCase and removes all others from the DOM. If no match is found, the element with ngSwitchDefault is rendered.