60 Angular Interview Questions and Answers

AngularJS is a JavaScript-based open-source front-end web framework maintained by Google. It extends HTML with custom attributes and expressions, and provides a structured framework for dynamic web applications.

Two-way data binding automatically synchronizes data between the model and view. When data in the model changes, the view updates automatically, and vice versa. This is achieved using the ng-model directive.

Directives are markers on DOM elements that tell AngularJS to attach specific behavior to that DOM element. Built-in directives include ng-model, ng-class, ng-repeat, and ng-show. You can also create custom directives.

Scope ($scope) is an object that refers to the application model. It acts as a glue between controller and view, providing context for expressions. Changes in scope are reflected in the view and vice versa.

Controllers are JavaScript functions bound to a particular scope. They are responsible for the application's business logic and initializing and modifying the scope, acting as an intermediary between view and model.

Angular expressions are JavaScript-like code snippets mainly used to bind application data to HTML. They are written inside double curly braces {{ expression }} and can be used in directives.

Dependency Injection is a design pattern where components are given their dependencies instead of creating them. Angular's DI system helps manage component dependencies, making applications more maintainable and testable.

Filters in Angular format the value of an expression for display to the user. Common built-in filters include currency, date, uppercase, lowercase, and number. Custom filters can also be created.

ng-repeat is a directive that clones HTML elements once for each item in a specified collection. It's similar to a foreach loop and is commonly used to display lists or tables of data.

The digest cycle is Angular's process of checking for changes in the scope object and updating the view accordingly. It occurs automatically but can also be triggered manually using $apply() or $digest().

Services are singleton objects that provide methods to keep data across the lifetime of an application. They're used for sharing data, implementing business logic, and maintaining application state across components.

$watch monitors scope variable changes, while $observe specifically watches attribute values. $watch is more general and can watch any scope property, while $observe is specific to DOM attribute changes.

Transclusion is a feature that enables you to insert the original content of a directive into a specified place in the directive's template. It's implemented using the ng-transclude directive and transclude property.

Routing in Angular allows you to switch views based on URL changes. It's implemented using ngRoute module, configuring $routeProvider to map URLs to controllers and templates, enabling single-page application behavior.

Promises represent asynchronous operations. They're implemented using $q service in Angular, providing .then(), .catch(), and .finally() methods to handle successful and failed async operations.

Interceptors are middleware functions that can modify HTTP requests and responses. They can handle authentication, logging, error handling, and transforming data before it reaches the application.

$digest processes only the current scope and its children, while $apply triggers a complete $digest cycle from the root scope. $apply is used when integrating with non-Angular code.

$provider is used to configure service providers during the config phase of an application. It allows you to create and configure services, factories, providers, and values before the application runs.

Isolated scope creates a new scope for directives that's completely detached from parent scope. It's created using scope: { } in directive definition and helps create reusable components.

Factory is a function that returns an object, while service is a constructor function instantiated with 'new'. Factories offer more flexibility in object creation and initialization.

Angular provides $cacheFactory service for storing and retrieving data. It's commonly used with $http service to cache API responses and improve application performance.

Decorators are design patterns that allow behavior to be added to services, directives, or filters at configuration time. They're implemented using $provide.decorator() method.

Bootstrapping is the initialization process of an Angular application. It can be automatic (using ng-app) or manual (using angular.bootstrap()), setting up the application's modules and dependencies.

Angular events are triggered using ng-click, ng-submit, etc. They can be handled using scope methods, $emit and $broadcast for cross-controller communication, and $on for event listening.

Dirty checking is Angular's process of detecting changes in model values by comparing them with previous values during the digest cycle. It's how Angular implements data binding.

$location service parses the URL in the browser address bar and makes it available to the application. It provides methods to read and modify the URL without page reload.

Dependency annotation tells Angular how to inject dependencies. It can be done using inline array notation, $inject property, or implicitly through function parameter names.

Constants and values are services for storing configuration data. Constants cannot be changed during runtime and are available in config phase, while values can be modified but aren't available in config.

Scopes inherit prototypically from their parent scope. Child scopes have access to parent scope properties, but modifying primitive values creates a new property in the child scope.

Compile function transforms the template DOM and runs once for the directive. Link function runs for each instance of the directive and is used to attach event listeners and update the DOM.

Modules are containers for different parts of an application like controllers, services, filters, etc. They help in organizing and encapsulating code, enable dependency management, and allow code reusability and maintainability.

Lazy loading improves performance by loading modules only when needed. Implement using Routes with loadChildren property, configuring feature modules, and using dynamic imports for component loading.

Change detection determines how component changes are detected and updated. OnPush strategy improves performance by checking only when inputs change or events occur, versus Default strategy checking all bindings.

Zones are execution contexts that track async operations. NgZone handles Angular's change detection by monitoring async operations. Using runOutsideAngular() can improve performance by avoiding unnecessary change detection.

Memory leaks often occur from unsubscribed Observables, event listeners, or intervals. Use ngOnDestroy to clean up, implement unsubscribe patterns, use takeUntil operator, and properly destroy components.

JIT compiles templates in browser at runtime, while AOT pre-compiles during build. AOT provides better performance, smaller bundle size, earlier error detection, and better security.

Resolvers pre-fetch data before route activation, ensuring data availability before component rendering. They implement Resolve interface and return data through Observable, Promise, or synchronous values.

State management can use services with BehaviorSubject, NgRx for complex applications, or custom implementations. It centralizes data flow, handles side effects, and maintains application state.

Custom change detection involves implementing ChangeDetectorRef methods like detectChanges(), markForCheck(), detach(). Used for manual control over change detection for performance optimization.

Angular elements are Angular components packaged as custom elements (Web Components), allowing Angular components to be used in non-Angular applications. Implemented using createCustomElement().

Micro-frontends split applications into independently deployable features. Implement using Module Federation, custom elements, iframes, or routing-based solutions with separate builds.

DI tree determines how services are shared and scoped. Services can be provided at root, module, or component level, affecting their lifetime and visibility throughout the application.

Decorators are design patterns that modify classes and properties using metadata. Custom decorators can add behavior, validate inputs, modify class definitions, or implement cross-cutting concerns.

Performance optimization includes using OnPush strategy, trackBy for ngFor, lazy loading, tree shaking, preloading strategies, virtual scrolling, and web worker implementation.

Security features include built-in XSS protection, CSRF prevention, sanitization services, Content Security Policy support, and URL sanitization. Implement custom security with HTTP interceptors.

Guards control route access based on conditions, while resolvers pre-fetch data. Both can return Observable, Promise, or boolean, and can be combined for complex routing scenarios.

Server-side rendering uses Angular Universal, improving SEO and initial load performance. Implement using TransferState for data sharing and platform-specific providers.

Testing utilities include TestBed for component testing, HttpTestingController for HTTP mocks, async/fakeAsync for async testing, and jasmine-marbles for Observable testing.

Schematics are templates for generating or modifying code. Custom schematics can automate tasks, enforce patterns, and extend Angular CLI functionality.

Advanced form validation uses custom validators, async validators, cross-field validation, and dynamic form generation. Implement using AbstractControl and ValidationErrors interface.

DI tokens uniquely identify dependencies. Custom tokens can provide configuration, handle multi-providers, and implement factory functions for complex dependency scenarios.

Architectural patterns include container/presentational components, smart/dumb components, facade services, and state management patterns for scalable applications.

Error handling uses global error handlers, HTTP interceptors, RxJS error operators, and error boundaries. Implement custom error handling strategies for different error types.

Compilation involves template parsing, binding generation, and optimization. Custom compilation can modify templates, implement macros, or optimize build output.

Workspace features include multi-project architecture, shared libraries, project-specific configurations, and build optimizations. Used for managing large-scale applications.

Authentication implements JWT, OAuth, or custom protocols using HTTP interceptors, guards, and services. Handle token management, session persistence, and secure routing.

Internationalization uses i18n pipes, translation services, and locale data. Implement dynamic translations, number/date formatting, and right-to-left support.

Progressive Web App features include service workers, app manifest, offline capability, and push notifications. Implement using @angular/pwa and service worker configurations.

State management includes immutable state patterns, action/reducer patterns, and effect handling. Implement using state containers, observables, and change detection strategies.

Build optimization includes tree shaking, code splitting, differential loading, and bundle analysis. Implement custom webpack configurations and optimization strategies.