100+ Angular interview questions and answers for 2024

Angular is an open-source JavaScript framework written in TypeScript. Google controls this, and its main purpose is to develop single-page applications. Angular is a popular framework for building dynamic, responsive web applications. It provides several added functionalities, such as routing, HTTP requests, and form handling, saving developers much time and effort.

As a framework, Angular has distinct advantages, providing a standard structure for developers to work with. It allows users to build large-scale applications in a maintainable manner. Some of the common advantages of Angular are -

• It provides a firm opinion on how the application should be structured. It also offers bi-directional data flow and updates the real DOM.
• It consists of components, directives, pipes, and services, which help create applications smoother.
• Components dependent on other components can be easily worked around using Angular
• Other generic advantages include clean and maintainable code, unit testing, reusable components, data binding, and excellent responsive experience.

TypeScript is a statically-typed superset of JavaScript developed and maintained by Microsoft. Its primary goal is to enhance the maintainability, scalability, and reliability of JavaScript applications by adding optional types, classes, interfaces, and modules which helps in detecting potential issues during development time rather than at runtime. The core features of TypeScript include Static Typing, Classes and Interfaces, Decorators, TypeScript Compiler and Namespaces and Modules.

TypeScript is used in Angular because it provides better tooling support, improved type checking, and additional features like decorators, interfaces, etc.

Angular uses two-way binding. Changes 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 DOM change must be tracked

Angular utilizes various technologies under the hood to provide an efficient development experience. Some of these essential technologies include:

• TypeScript: Angular uses TypeScript as its primary programming language.
• RxJS: RxJS, or Reactive Extensions for JavaScript, is a library that helps manage asynchronous data flow and event handling through the use of observables.
• Zone.js: Zone.js is a JavaScript library that allows Angular to manage and detect changes in the application state by creating execution contexts called "zones".
• Dependency Injection: Angular employs a hierarchical dependency injection (DI) system for providing instances of classes, services, or values to components, directives, or other services.
• Angular CLI: Angular Command Line Interface (CLI) is a powerful tool for generating, building, testing, and deploying Angular applications.
• Angular Material: Angular Material is a UI component library that provides a set of high-quality, accessible, and modular UI components to follow Material Design guidelines.

Angular's dependency injection system is hierarchical. It consists of a tree of injectors parallel to the application's component tree. A hierarchy of dependencies is formed in configuration. Injector reconfiguration can be done at any level in the component tree. Providers for different injectors can also be configured in the injector hierarchy.

The purpose of async pipes is to mark components that should be checked for changes. Subscribe to an observable promise and return the last emitted value. As soon as this new value is emitted, the asynchronous pipe marks the component.

Asynchronous pipes are now automatically disconnected or terminated whenever a component is destroyed. Similarly, when a component's expression reference changes, the asynchronous pipe detaches or unsubscribes from the old observable or promise and subscribes to the new observable.

Yes, they are similar as both are front-end frameworks that Google maintains. However, they are different as Angular 2 is not just an upgraded version of Angular JS. Angular 2 is a newly developed framework that has been written from scratch. So, if someone is looking to upgrade or change to Angular 2 from Angular JS, it will require rewriting the code.

In this or other Angular 2 interview questions, if you can use practical examples or past experience to answer the question, it will get you some brownie points.

Default and OnPush are the two change detection strategies. If the default strategy is implemented in all the components, Angular performs a check on the whole tree irrespective of where the change took place. The OnPush detection strategy is used when the developer has to inform Angular that the performance improvement conditions will be followed. This informs Angular that the application’s component relies on the input alone and objects passed must be considered unchangeable. The Principle of mile automaton, in which the current state relies on the input values alone, is used for this purpose.

This is another popular type of Angular interview question where you must know different techniques and the difference between them.

FormsModule and Reactiveforms Module

The following methods can be used to update the view:

1. ApplicationRef.prototype.run method will help update the view by running change detection on the complete component tree.
2. NgZone.prototype.run method can achieve the same by similarly running change detection on the whole tree. The run method calls tick internally, and the function that must be performed is taken by the parameter before the tick.
3. ChangeDetectorRef.prototype.detectChanges method runs change detection on the present component and the children of the present component.

Usually, inline templates are used for small codes, and external templates are used for comparatively bigger views. However, the choice of inline or external templates is sometimes based on organizational policy, situations, etc.

Single-page web applications load once with new features just as user interface additions. It does not load new HTML pages to display the new content, instead it is generated dynamically. It is 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.

Decorators in Angular are a design pattern used to modify or annotate classes, properties, methods, and parameters with meta-data, without changing their behavior. Essentially, decorators allow developers to modify or extend the functionality of a class or its members through declarative syntax. They can be considered as wrappers around classes or class members.

Angular uses four main types of decorators:

Class decorators: Class decorators apply to classes to modify their behavior or define metadata.

Property Decorators: Property decorators are used on class properties. They help configure properties and provide metadata for property bindings.

Method decorators: Method decorators apply to class methods and are often used to react to lifecycle events.

Parameter decorators: Parameter decorators apply to method or constructor parameters, providing additional metadata about the parameter.

Lazy loading of modules is required when the code is to be broken into pieces. When an app is downloaded into the browser, the entire application code doesn’t load. When the transition to the route takes place with lazy loading, the lazy loading module loads the code into the browser.

Template-driven forms are one of the two approaches to handle forms in Angular. They rely on directives within the form's template and Angular's automatic form generation. Template-driven forms are suitable for simple forms with basic validation.

For all modules, components, etc. that needn’t occur in a single copy for the application, instead must be imported into different modules, there is a generic module called the Shared module. For storing services that must occur in a single copy in the whole application, a Core module is used. For example, when user authorization for data storage is needed, the user authorization appears as a core module.

When one needs to ascertain the proper functioning of isolated segments, unit testing is used to test these segments. On the other hand, when one wants to ensure that entire sets of components are working properly in sync and the application is working as expected, one can use one-to-one testing. User interaction simulations are often used in one-to-one tests to ensure that apps are functioning properly. Two good testing tools are Jasmine and Karma.

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.

Annotations in Angular are used to add metadata to a class, method, or property in order to provide additional information to the Angular compiler. Annotations are defined using decorator functions, which are added to the class, method, or property before its definition.

Directives in Angular are unique features that allow you to manipulate or extend the behavior of DOM elements, attributes, and components in your application. They are essentially instructions to the Angular renderer for how to handle elements and their properties in the DOM. Directives come in three different types:

• Component Directives
• Structural Directives
• Attribute Directives

Whenever repetition of an HTML template is required, the ngFor directive is used. It creates a template each time as the iteration becomes easier using the ngFor directive.

The purpose of the ngIf directive is to remove or recreate a part of the DOM tree in alignment with an expression. If the ngIf directive finds that the expression is evaluated to be false, the element is removed from the tree. Else a matching element is inserted into the DOM tree.

If we use a script tag inside the template, Angular marks the value as unsafe and automatically initiates sanitizing it. This eradicates the script tag, but the content is kept safe, i.e., the text element. This entire process results in eliminating the risk of injection attacks.

A template expression in Angular is an expression that is represented in double curly braces ‘{{ }}’ and produces a value. The template expression is executed by Angular and assigned to a binding target property. Now, the binding target can be an HTML element, a directive, or a component.

The methods or properties in Angular used in HTML in response to user events are called template statements. These template statements allow your application to engage users through actions like dynamic content display, form submissions, etc.

In Angular, pipes are used to transform the raw data into a required format before the final display to the end-users. These pipes are broadly categorized into two categories:

• Built-in Pipes of 2 types – Parameterized Pipes and Chaining Pipes.
• Parameterized Pipes refer to the pipes that carry parameters.

A custom element is used to extend HTML, wherein you can define a tag whose content is created and controlled by JavaScript code. Custom elements allow you to define new HTML elements that encapsulate their functionality and can be reused across multiple applications.

No, you do not need to bootstrap custom elements, as they bootstrap when added to the DOM. Also, the custom elements in Angular get automatically destroyed when removed from the DOM.

You can follow two steps to transfer components to custom elements:

Creating a custom element class: The first step in creating a custom element class involves using the createCustomElement() function provided by Angular. This function transforms an Angular component, along with its dependencies, into a custom element. Through this transformation, the component implements the NgElementConstructor interface, which results in a constructor class that generates a self-bootstrapping instance.

Registering element class with browser: The custom elements.define() function is used to register the configured constructor and its associated custom-element tag with the browser’s CustomElementRegistry.

The important mapping rules between the Angular component and the custom element are:

• The component input properties are parsed with the corresponding attributes for the custom element using the createCustomElement() API.
• The Component outputs are dispatched as HTML Custom Events and have the custom event's name that matches the output name.

REST stands for Representational State Transfer. An API that works with requests from HTTP. Here, the requested URL points to the data being processed. Then, use HTTP functions to identify specific operations that need to be performed on specific data. APIs that follow this scheme are called RESTful APIs.

The following are the steps to use the HttpClient:

• Firstly, start by creating a HttpClient instance.
• Next, create an instance of one of the methods.
• Command HttpClient to execute the method.
• After the execution, read the response.
• Finally, release the connection.
• And deal with the response.

View Encapsulation in Angular is a technique used to achieve encapsulation of styles associated with a specific component, isolating the styles so that they don't impact other components or global styles unintentionally. By default, Angular uses Emulated View Encapsulation, which means that the styles defined within a component only apply to that component's template and won't interfere with other components.

Angular provides three types of view encapsulation:

• Emulated - styles from the main HTML propagate to the component.
• Native ShadowDom - styles from the main HTML do not propagate to the component.
• None - styles from the component propagate back to the main HTML and are visible to all components on the page.

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

The scope in Angular binds the HTML and the JavaScript. It is an object with 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.

Every component has a lifecycle in Angular. It creates, renders, and destroys these components before removing them from the DOM with the help of lifecycle hooks. Here's their list -

ngOnChanges() - When Angular updates or resets data-bound input properties, ngOnChanges() triggers a response that handles this change and updates the associated component or directive.

ngOnInit() - Initialize the directive/component after Angular 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() - Reacts after Angular examines the content that has been projected into the component.

ngAfterViewInit() - Respond after Angular initializes the component's and child's views.

ngAfterViewChecked() - Enables the component to carry out extra operations or update its state based on the examined view changes.

ngOnDestroy - Cleanup just before Angular destroys the directive/component.

Error handling helps you gracefully manage unexpected conditions or failures that might occur during the execution of your application. Following are general steps to perform error handling in an Angular application:

Catch errors at the source: For errors stemming from asynchronous operations like HTTP requests, use the .pipe() method and the catchError operator from RxJS. Handle errors locally if possible, or return them for higher-level components to handle.

Create a centralized error handler: Implement a centralized error handler for uncaught exceptions and rejections. In Angular, you can create a custom ErrorHandler class that overrides the built-in one.

Register the custom error handler: Register your custom error handler in the root module to make it effective throughout the application.

Handle component-level errors: Use component lifecycle hooks such as ngOnInit, ngOnChanges, or ngAfterViewInit to capture and manage component-specific errors.

In Angular, content projection refers to a pattern where you can insert, or project, the content you want to use inside a different component. For example, consider a Card component that can accept the content provided by another component.

Pure Pipes in Angular are a specific type of pipe that adhere to some performance-optimizing rules. Pipes in Angular are used to transform input data into a desired output format, enabling us to display modified data without changing the actual data value.

Pure pipes have two essential characteristics:

Idempotence: They produce the same output when provided with the same input values, which means there are no side effects from running them. Multiple calls to a pure pipe with the same arguments will always return the same output.

Cache Functionality: Angular automatically optimizes pure pipes by caching their outputs and avoiding unnecessary re-execution. When the input values change, Angular only recalculates and updates the DOM with the new output. This efficient caching mechanism improves the performance of the application.

Angular calls an impure pipe for each change detection cycle, independent of the change in the input fields. For each of these pipes, several pipe instances are produced. These pipes' inputs can be altered.

By default, all pipelines are pure. However, as demonstrated below, you can specify impure pipes using the pure property.

Example:

Renderer2 allows you to manipulate DOM elements without accessing the DOM directly. It provides a layer of abstraction between the DOM elements and the component code. Renderer2 can be used to create elements, add text nodes, and appendchild elements with the appendchild method.

A renderer is a class that represents a partial abstraction of the DOM. Manipulating the DOM using a renderer does not break server-side rendering or web workers (it does break direct DOM access).

On the other hand, ElementRef is a class in Angular that provides a direct reference to a DOM element. It allows you to access the underlying DOM element and manipulate it directly. However, using ElementRef is not recommended in most cases because it breaks the abstraction provided by the renderer and can cause issues with server-side rendering and web workers.

Zone.js is a way to create a new context and run code within that context/zone. All code in a zone, whether synchronous or asynchronous, runs in the same context. Zone. js is basically used to create a new context and run code within it.

The race condition is when the user is on page 2 and viewing comments, and the POST call to save the newly created comment is still in progress. In a normal development environment, this works as expected. Additionally, this is typically seen late in the development cycle, mixed with complex business logic, etc.

Callbacks, promises, and async-await are one way to handle asynchronous data. Asynchronous programming in JavaScript is a technique in which the program does not wait for something to execute. This is useful when making API calls to retrieve data. This will take some time (probably 2-3 seconds).

HostBinding and HostListener are two decorators in Angular that are very useful in custom directives. HostBinding lets you set properties on the element or component that hosts the directive, and HostListener lets you listen to events on the host element or component.

Dependency Injection, or DI, is one of the fundamental concepts of Angular. DI is tied to the Angular framework and allows classes with Angular decorators, such as components, directives, pipes, and injectables, to configure their required dependencies.

One way to share data between components is by using a service as a mediator. The service can contain data that needs to be shared and methods to manipulate that data. The components can inject the service and use it to access or modify the shared data.

In this example, ComponentA sets the data in the DataService, and ComponentB displays the data from the DataService.

There are three ways to clone the object:

• Using Spread: const clonedObj = { ...originalObj };
• Using Object.assign: const clonedObj = Object.assign({}, originalObj)
• Using JSON: const clonedObj = JSON.parse(JSON.stringify(originalObj));

Here the bootstrap method starts the Angular application. It points to the AppModule that looks in the app folder. You can see in the app.module file that the bootstrap array parses the index, basically a list of all components.

You can detect non-primitive types using the following

• Using the ngOnChanges() lifecycle method
• Using Input Setter and Getter Property
• Using an Async pipe

sessionStorage is mostly similar to localStorage. The difference is that data in localStorage never expires, but data in sessionStorage is deleted when the page session ends. Each time a document is loaded in a particular browser tab, a unique page session is created and assigned to that particular tab.

Angular Bootstrap allows the user to initialize or start an Angular application. Angular supports both manual and automatic bootstrapping. Let's quickly understand the two.

Manual bootstrap: This gives the user more control over when and how their Angular app should be initialized. It is very useful when the user wants to perform other tasks or operations before Angular compiles the page.

Automatic bootstrap: You can use auto-bootstrapping to add the ng-app directive to your application root. Often when the user needs Angular to launch an application automatically. As soon as Angular sees the ng-app directive, it will load the associated module and compiles the DOM.

MVVM architecture plays a vital role in breaking the tight coupling between components. This architecture includes three parts:

Model: A model represents a particular application's business logic and data. In other words, it consists of entity structures. Models contain business logic, such as model classes, remote and local data sources, and repositories.

View: A view is the visual layer of an application that contains UI code. The View sends the user's actions to the ViewModel. However, it does not receive a direct answer. The view should subscribe to the observables exposed by the ViewModel to receive the response.

ViewModel: A ViewModel is an application abstraction layer that connects the view and the model, acting as a bridge between the two. The two are linked via data binding, and the ViewModel keeps track of changes made to the View and makes the necessary changes to the Model.

In Angular applications, authentication and authorization are vital processes to secure the application and control access to its resources. Authentication refers to verifying the identity of a user by validating their credentials—such as a username and password—when they try to access the application. An authentication mechanism typically involves a backend server that validates user credentials and responds with a token (such as JWT) if the credentials are valid. This token will be sent with subsequent HTTP requests as proof of a successfully authenticated user.

While, Authorization is the process of determining the level of access a user has to specific resources, actions, or routes within the application. After authentication, the app may need logic to control resource access based on user roles or privileges.

Angular's digest cycle is the process of monitoring watchlists to track changes in the values ​​of watch variables. Each digest cycle compares the scope model values ​​of the current version and the previous version.

A filter is an Angular function that helps format the value of an expression for displaying to the user. They can be added to services, instructions, templates, or controllers. There is also the option to create personalized filters if desired.

These filters make organizing and displaying the data that meets your criteria easy. Filters are placed after a pipe symbol ( | ) when used in an expression.

Various types of filters in Angular are mentioned below:

currency: It converts numbers to the currency format

filter: It selects a subset containing items from the given array

date: It converts a date into a necessary format

lowercase: It converts the given string into lowercase

uppercase: It converts the given string into uppercase

orderBy: It arranges an array by the given expression

json: It formats any object into a JSON string

number: It converts a number value into a string

limitTo: It restricts the limit of a given string or array to a particular number of elements or strings

A Service is a class in Angular that provides functionality to other components or services. It is used to share data or operations across multiple components, or to encapsulate business logic. Services are also used to perform asynchronous operations like HTTP requests or to store application state. Services are typically singletons, which means that they are created only once and reused throughout the application. Here are three ways to create services in Angular:

Service: This is the simplest way to create a service in Angular, using the @Injectable decorator to declare a class and provide it to a module. The service class can then be injected into components or other services using dependency injection.

Factory: Factories can be useful when you need more control over the service creation process, such as when you need to customize the service based on runtime conditions.

Provider: A provider is similar to a factory, but it allows you to create multiple instances of a service. Providers are useful when you need to create multiple instances of a service with different configurations, such as when you need to connect to different APIs or databases.

When using observables in RxJS, you need to subscribe to the observable to use the data flowing through it. This data is generated by publishers and consumed by subscribers. When subscribing to an observable, pass a function for data and another function for errors. It allows you to display a message if an error occurs or process the message in some way.

Angular Router is an essential service provided by the Angular framework for handling navigation and managing complex application routing scenarios. It enables developers to map URLs to specific components, control navigation and history, and pass data between components during navigation. The Router is built upon the concept of modules, components, and directives, which allows developers to create a flexible and maintainable routing structure.

Using metadata is how we tell Angular how to process a class. When we use a component, it acts as a class unless we tell Angular that it’s a component, and we do this with the help of metadata. Metadata is attached in TypeScript using a decorator. Decorators are functions that know the configuration of classes and how they are supposed to work.

Ahead-of-Time (AOT) compilation is a technique in Angular that compiles the application and its components into low-level JavaScript and HTML during the build process, before the browser runs the code. The Angular compiler takes the application's TypeScript code, metadata, and templates and generates efficient JavaScript code that can be executed by the browser.

AOT compilation offers several advantages:

Faster rendering: Since the application is compiled before it reaches the browser, there's no need for the just-in-time (JIT) compilation that occurs during runtime. As a result, the application loads and renders faster.

Smaller bundle size: AOT compilation removes Angular compiler code and unused libraries from the final bundle, reducing the bundle size and resulting in faster download times.

Template validation during build time: AOT compilation can catch template binding errors during the build process, providing early feedback on issues before deployment. This reduces the chances of runtime errors occurring in production.

Security improvements: AOT compilation evaluates expressions and compiles them into JavaScript, eliminating the need for potentially unsafe JavaScript eval() calls. This reduces the application's exposure to injection attacks.

Better performance: Because AOT compiles Angular components and templates into efficient, optimized code, performance is generally improved compared to JIT compilation.

Angular CLI is also known as Angular Command Line Interface. Angular supports CLI tools that allow users to perform various functions, including initialization, development, and maintenance of Angular applicationṣ.

The advantages of using Angular CLI are that it simplifies the development process, reduces the time and effort required to set up a project, provides a standardized project structure, and improves code quality and consistency.

Eager loading: The eager loading technique is the standard module loading strategy. Busy load function modules are loaded before the program starts. This is mainly used for small applications.

Lazy loading: Lazy loading is a technique that allows modules to be loaded on-demand instead of being loaded all at once when the application starts. This improves performance by reducing the initial load time of the application.

Lazy loading can be implemented by creating a separate module with its own routes, and using the loadChildren property to specify the path to the lazy-loaded module.

View encapsulation specifies whether a component's templates and styles affect the entire program or vice versa.

Angular offers three encapsulation methods.

Native: Components do not inherit styles from the main HTML. Styles defined in that component's @Component decorator apply only to that component.

Emulated (default): Components inherit styles from the main HTML. Styles set with the @Component decorator apply only to that component.

None: Component styles are reflected in the main HTML, so they are accessible to all components on the page. Be careful with programs that contain empty or native components. Without encapsulation, the style is repeated for all components that use native encapsulation.

In Angular, string interpolation and property binding are methods for binding data from the component class to the component's template, allowing dynamic updates and communication between the TypeScript code and the HTML. Both methods serve to establish data binding but differ in their use cases and syntax:

String interpolation: String interpolation is a technique for one-way binding of component class properties to textual content in a component's template. It uses double curly braces {{ }} to embed a TypeScript expression or a property value in the template. Angular automatically evaluates the expression and updates the text content when the bound property changes.

Property binding: Property binding is a technique for one-way binding of a DOM property, an attribute, or a custom property of a child component to a property in the parent component class. It uses square brackets [] to indicate that a property is being bound.

In summary, string interpolation is used to embed expressions or data in textual content, while property binding facilitates binding DOM properties and attributes to component properties. Both mechanisms enable efficient updating of the DOM when the bound properties change.

Pipes are functions that allow you to easily concatenate JavaScript expressions and transform them into the desired output. For example, you can compare it with string functions in other programming languages. You can also use pipes to combine multiple expressions, whether they are all values ​​or some values ​​and some declarations.

For example:

var css = myTheme.color | "Red" ;

This line assigns a value to css and is equivalent to writing:

Pipes have several built-in functions that can be used to transform data. B. Value and Extraction. You can also create your custom tube. A pipe is a data transformer that runs on the output of an Angular component. They take in data and return transformed data. For example, given an expression like number | For 1000, the number pipe takes the data from the output and converts it to 1000. Angular has many built-in pipes that you can use. You can also create your own custom pipes by implementing the PipeTransform interface in your class.

A pipe takes input such as a value expression, a function that returns an expression, or a component property that returns a number with a value of 1,000. You can pipe this output to "1,000" or a formatted string of "1,000".

Example:

Output:

THIS IS AN EXAMPLE OF CUSTOM PIPES IN ANGULAR

RouterLink is an anchor tag directive that gives the router authority over these elements because the navigation route is fixed.

Example: As seen below, you may pass string values to the router-link directive.

RouterState is the root tree. Nodes in this tree are aware of "used" URL segments, fetched arguments, and processed data. You can get the current RouterState from anywhere in your application using the router service and the routerState property.

Here's a coding example of how you can use RouterState in a component:

In this example, an Angular component imports Router and ActivatedRoute. In the ngOnInit lifecycle hook, a method logRouterState is called, which logs information about the router state. The routerState.url returns the current URL, while routerState.snapshot provides a snapshot of the entire router state tree.

Angular Material is a user interface component pack that enables professionals to create consistent, beautiful, and fully functional websites, web pages, and web apps. This is achieved by adhering to modern web design concepts such as gentle degradation and browser potential.

Data can be passed between components in Angular using Input and Output bindings, Service, and EventEmitter. Here is an example of using Input and Output bindings:

In this example, the ParentComponent passes a string value to the ChildComponent using Input binding. The ChildComponent then emits an output event using EventEmitter, which the ParentComponent listens to using Output binding and logs to the console.

Transpiling converts source code in one programming language into source code in another programming language. In Angular, this usually means converting TypeScript code to JavaScript. You can develop your Angular application code using TypeScript (or another language like Dart) and transpile it to JavaScript. This happens naturally and internally.

HTTP interceptors in Angular are a way to intercept and modify HTTP requests and responses programmatically before they reach their intended endpoints. Interceptors can be used for a variety of purposes, such as adding authentication tokens to request headers, handling errors, logging requests and responses, or caching responses.

To create an HTTP interceptor, implement the HttpInterceptor interface and define a custom interceptor class. Here's an example of a simple interceptor that adds an authentication token to request headers:

Create the interceptor:

In this example, the AuthInterceptor class implements the HttpInterceptor interface and its intercept() method. The HttpRequest is cloned and modified to include the authentication header, and then the modified request is handed over to the next interceptor or the API endpoint using next.handle(authReq).

Register the interceptor in the AppModule:

In this example, the AuthInterceptor is registered in the AppModule with the HTTP_INTERCEPTORS token. The multi: true flag ensures that any other interceptors registered with the same token are preserved, allowing multiple interceptors to be chained together.

With the interceptor in place, every HTTP request sent using Angular's HttpClient will include the authentication token in the request headers. Interceptors are a powerful tool to manage and manipulate HTTP requests and responses without modifying the code in individual services or components.

Schematics are template-based code generators that enable complex logic. They are typically packaged in collections and installed with npm. Schematics are intended to transform software projects by generating or modifying code.

A Resolver in Angular is a service that helps resolve data or configuration before a route is activated. It is used to fetch data from a remote server or load data from a store or database. A resolver can also be used to check whether a user is authenticated or authorized to access a route. It should be used when a component or view relies on some data or configuration that needs to be fetched before rendering.

Schematics CLI is a tool for creating, managing, and running Schematics, which are code generators and transformers in the Angular framework. Schematics can be used to create, modify, and refactor code in Angular applications, and the Schematics CLI provides a command-line interface for managing Schematics.

The RxJS debounceTime() operator is used to delay the emission of values from an Observable stream until a certain amount of time has passed after the last emission. It works by discarding emitted values that occur within the specified time interval, and only emitting the last value after the time has elapsed. This can be useful in scenarios where you want to reduce the number of events being processed, such as with user input in a search field.

Route parameters can be accessed by subscribing to the ActivatedRoute service and getting the paramMap property.

Pagination can be implemented by using the slice() method and calculating the start and end index based on the current page and page size.

In this example, the getItemsForPage method calculates the start and end index based on the current page and page size, and the displayedItems property is updated when the previous or next page button is clicked.

If no handler is provided for a notification type, the observer will automatically ignore notifications of that type, and the observer instance will only emit values ​​if subscribed.

ngOnInit is called once when the component is initialized and all its properties have been initialized. ngAfterViewInit is called once after the view and all child views have been initialized.

Angular elements refer to Angular components, a web standard for defining new HTML elements packaged as custom elements. These custom items are also called web components. Custom Angular elements are automatically fired when added to the DOM tree.

Angular is built on modern web platform standards, so Chrome, Edge (Chromium-based), Firefox, Opera, Safari, and other modern browsers support Angular elements via polyfills. A polyfill is a piece of code that allows modern browsers to support features that are not supported by the browser.

SPA stands for Single Page Application. This technique maintains only one page, index.HTML, even if the URL constantly changes. The SPA technology is easy to create and fast compared to traditional web technology.

There are three kinds of directives in Angular. Let’s discuss them:

Components: A component is just a directive with a template. It is used to define a single part of the user interface using TypeScript code, CSS styles, and HTML templates. When defining a component, use a component decorated with the @ symbol and pass an object with a selector attribute. The selector attribute tells the Angular compiler which HTML tag the component is associated with, so when it encounters that tag in HTML, it knows to replace it with the component template.

Structure: Structural directives are used to change the structure of the view. For example, you can use the ngIf directive to show or hide data based on properties. Also, if you want to add a list of data to your markup, you can use *ngFor, etc. These directives are called structural directives because they change the structure of the template.

Attribute: Attribute directives change the appearance or behavior of an element, component, or directive. They are used as attributes of elements. Directives such as ngClass and ngStyle are attribute directives.

In Angular, we use two different kinds of compilers:

• Just-in-time (JIT) compiler
• Ahead-of-time (AOT) compiler

These two compilers are useful, but they serve very different purposes. Our browser can't understand TypeScript. It can understand only JavaScript, so a JIT compiler compiles TypeScript to JavaScript.

The compilation is performed in the development environment. If it takes less time to compile and more time to develop for stepping through functions quickly. The JIT compiler is used when you deploy your app locally using the ng serve or ng build commands or create an uncompressed build of your entire code base.

On the other hand, AOT compilers are used to generate lightweight production builds of the entire code base, ready to use in production. To use the AOT compiler, the ng build command should be used with the –prod blog.ng build –prod.

This tells the Angular CLI to create an optimized prod build of your codebase. It will take some time as it does some optimizations, such as: Shrinking can take some time, but you can save that time for production builds.

In Angular, common modules available in the @angualr/common package are modules that encapsulate all commonly needed functionality of Angular, such as services, pipes, directives, etc.

It also contains submodules like HttpClientModule available in the @angular/common/http package. Angular's modularity allows its functionality to be stored in small standalone modules that can be imported and included in your project when needed.

AngularJS is the previous version of Angular, which is a complete rewrite, i.e., the two have several differences. Let’s look at them.

Architecture: AngularJS supports MVC architecture where the model contains the business logic. The view displays information retrieved from the model. The controller manages the interaction between the view and model by retrieving data from the model and passing it to the view.

Angular architecture, on the other hand, is based on components rather than discrete parts such as logic or presentation, but a single, self-contained part of the user interface that can be used in isolation or integrated into one big project.

Language: AngularJS only allowed JavaScript. However, Angular allows you to use both TypeScript and JavaScript.

Mobile support: AngularJS doesn't support mobile browser, but supports all major mobile browsers.

Angular expressions and JavaScript expressions are very different from each other. Angular allows you to write JavaScript in HTML, which is impossible in pure JavaScript. Also, all Angular expressions are localized.

However, in JavaScript, these expressions are limited to global widgets. The Angular compiler resolves these differences by taking the Angular code we write and transforming it into plain JavaScript that a web browser can understand and use.

HTTP requests can be made by using the HttpClient service and the get(), post(), put(), delete(), and other methods.

In this example, the DataService uses the get() method to make an HTTP GET request to the specified URL and return the result as an observable.

.innerHTML sets the HTML content of an element, while textContent sets the plain text content of an element. Using textContent is generally safer than using innerHTML, as it prevents injection of any potentially malicious script or HTML.

Instead of relying on try/catch, which is useless in an asynchronous context, you can manage the problem by setting an error callback on the observer.

Example: You may create an error callback as shown below.

You can use the ng new command when building your project with the CLI. All components are generated with preset Sass files.

When you attempt to use a script tag within an Angular component's template, the Angular framework will ignore and strip the script tag from the final rendered DOM to maintain safety and mitigate security risks such as Cross-Site Scripting (XSS) attacks. Thus, the JavaScript code within the script tag will not be executed, and the tag itself will be removed.

Example:

Suppose you have the following component with a template containing a script tag:

In this example, the template has a script tag with JavaScript code to print a log message. However, when Angular renders this component, the framework will remove the script tag from the DOM, and the JavaScript code will not be executed.

If you need to execute JavaScript code in your Angular components, it is recommended to write that code inside the TypeScript component class, utilize Angular's lifecycle hooks, or use services and dependency injection to separate the code and logic efficiently.

Cookies can be set and get by using the Angular CookieService and the get(), set(), and delete() methods.

In this example, the CookieService provides methods to get, set, and delete cookies, and the ExampleComponent uses these methods to manage cookies.

Although both promises and observables are used to handle asynchronous requests in JavaScript, they work in very different ways. Promises can only handle a single event at a time, while observables can handle a sequence of asynchronous events over some time. Observables also provide us with a wide variety of operators that allow us to transform data flowing through these observables with ease.

A promise is just a way to wrap asynchronous operations so that they can be easily used, while an observable is a way to turn asynchronous operations into a stream of data that flows from a publisher to a subscriber through a well-defined path with multiple operations transforming the data along the way.

ngcc stands for Angular Compatibility Compiler. It is a standalone tool that transforms packages of third-party libraries from the node_modules folder into a format compatible with Angular's Ivy compilation and rendering pipeline. The ngcc tool is important because Angular's update to the Ivy engine introduced some internal changes that require older non-Ivy npm packages to be transformed before they can be used with Ivy-based applications.

Some of the security concerns in Angular are Cross-Site Scripting (XSS), Cross-Site Request Forgery (CSRF), and Insecure Direct Object References (IDOR). These can be mitigated by following best practices like sanitizing input, using HttpOnly and secure cookies, implementing CSRF tokens, and using Route Guards to protect routes that require authentication or authorization.

ActivatedRouteSnapshot represents the state of the currently activated route, including its parameters, data, and URL segments, while RouterStateSnapshot represents the state of the router at a specific moment in time, including the activated route and its ancestors.

The State function in Angular declares an animation state within a trigger attached to an element. The following is the syntax for State function:

The Style function in Angular is used to declare a key/value object that contains CSS properties/styles and are used for an animation. The syntax of the Style function is given by:

Some performance optimization techniques in Angular include:

• Lazy loading modules and components
• Using the OnPush change detection strategy
• Minimizing DOM manipulation by using ngIf and ngFor instead of *ngIf and *ngFor
• Using trackBy to track the identity of elements in *ngFor loops
• Using AOT compilation
• Using server-side rendering (SSR)
• Minimizing the use of nested subscriptions
• Using the async pipe to unsubscribe from observables automatically

NgZone is a service in Angular that provides a way to manage the execution context of asynchronous operations. It is used to force the application to run change detection or other update routines explicitly. NgZone is typically used when updating the UI and running change detection from outside of Angular, such as in third-party libraries or browser events.

The usage of ng-content in Angular is to insert the content dynamically inside the component. It helps in increasing component reusability and passing content inside the component selector.

In this example, the filterArray function takes an array and a search query as input and returns a filtered array of objects that match the search query. It uses the Array.filter() method to filter the array based on the values in the object, and the Array.some() method to iterate over the values and return true if a match is found. The function uses case-insensitive search to match the query with the values in the object.

To directly accesses items in the view, use the @ViewChild directive. Consider an input item with a reference.

<input #example>

and construct a view child directive that is accessed in the ngAfterViewInit lifecycle hook

@ViewChild('example') input;

ngAfterViewInit() {
console.log(this.input.nativeElement.value);
}

The process of synchronizing the model with the view is called change detection. Even if you use the ng-model to implement two-way binding, this is syntactic sugar for unidirectional flow. Change detection is incredibly fast, but as your app grows in complexity and number of components, change detection has to do more and more work.

Change detection mechanism - starts at the root component and ends at the last component, moves forward only, never backward. This is due to the unidirectional data flow. A component tree is the architecture of an Angular application. Each component is a child, but a child is not a parent. One-way flow no longer requires $digest loop.

A bootstrapping module in Angular is the root module responsible for initializing and launching the application. Usually called AppModule by convention, it sets up the required configurations, imports essential Angular libraries, and specifies the root component that serves as the app's entry point.

Here's an example of a bootstrapping module:

In this example:

• The AppModule class uses the @NgModule decorator, which contains an object with configurations and metadata about the module.
• The declarations array in the @NgModule decorator lists all components, directives, and pipes utilized within the module.
• The imports array contains Angular and third-party modules necessary for the app.
• The providers array lists all the injectable services.
• The bootstrap property includes the root component AppComponent in an array, specifying Angular's entry point for the app.

To run the Angular app, you need to bootstrap the AppModule in the main script file, usually called main.ts:

In this example, the platformBrowserDynamic().bootstrapModule(AppModule) function call starts the application, initializing it using the AppModule.