Top 100 Angular Interview Questions and Answers
Q1: What is Angular? basics
Angular is a TypeScript-based open-source framework for building dynamic web applications with a component-based architecture and powerful tooling.
Q2: What is a component? components
A component is a basic UI building block in Angular that encapsulates template, styles, and logic, marked with @Component decorator.
Q3: What is a service? services
A service is a reusable class marked with @Injectable that provides shared functionality, often used for API calls and data sharing.
Q4: What is dependency injection? core
Dependency injection is a design pattern where Angular automatically provides dependencies to components/services, improving testability and decoupling.
Q5: What is a module? modules
A module is a container for components, services, and other code organized with @NgModule decorator to group related features.
Q6: What is @NgModule? decorators
@NgModule is a decorator that defines a module, declaring components, services, imports, exports, and providers.
Q7: What is @Component? decorators
@Component is a decorator that marks a class as a component and defines its selector, template, and styles.
Q8: What is @Injectable? decorators
@Injectable is a decorator that marks a class as a service eligible for dependency injection.
Q9: What is a directive? directives
A directive is a marker on a DOM element that tells Angular to attach behavior or transform the DOM, like *ngIf or *ngFor.
Q10: What are structural directives? directives
Structural directives change DOM structure by adding/removing elements, e.g., *ngIf, *ngFor, *ngSwitch.
Q11: What are attribute directives? directives
Attribute directives change element appearance or behavior without affecting DOM structure, e.g., ngStyle, ngClass.
Q12: What is *ngIf? directives
*ngIf conditionally renders an element based on a boolean expression.
Q13: What is *ngFor? directives
*ngFor repeats template for each item in a list, e.g., *ngFor="let item of items".
Q14: What is *ngSwitch? directives
*ngSwitch conditionally renders different templates based on a switch value.
Q15: What is ngStyle? directives
ngStyle dynamically sets inline styles on an element based on an expression object.
Q16: What is ngClass? directives
ngClass dynamically applies CSS classes based on conditions or an object.
Q17: What is data binding? binding
Data binding synchronizes data between component class and template in one or two-way direction.
Q18: What is property binding? binding
Property binding sets a component/DOM property to a template expression using [property]="value" syntax.
Q19: What is event binding? binding
Event binding triggers a method when a DOM event occurs using (event)="handler()" syntax.
Q20: What is two-way binding? binding
Two-way binding syncs data bidirectionally using [(ngModel)]="property" syntax.
Q21: What is string interpolation? binding
String interpolation displays component data in template using {{expression}} syntax.
Q22: What is a template reference variable? templates
A template reference variable (#varName) provides direct access to a DOM element in the component class.
Q23: What is a pipe? pipes
A pipe transforms data in templates using the | syntax, e.g., {{ date | date:'short' }}.
Q24: What is the async pipe? pipes
The async pipe automatically subscribes to observables and displays their latest value in templates.
Q25: What is the date pipe? pipes
The date pipe formats dates according to locale rules, e.g., {{ date | date:'dd/MM/yyyy' }}.
Q26: What is the currency pipe? pipes
The currency pipe formats numbers as currency, e.g., {{ price | currency:'USD' }}.
Q27: What is the uppercase pipe? pipes
The uppercase pipe converts text to uppercase, e.g., {{ text | uppercase }}.
Q28: What is the lowercase pipe? pipes
The lowercase pipe converts text to lowercase, e.g., {{ text | lowercase }}.
Q29: What is RxJS? rxjs
RxJS is a library for reactive programming using observables, enabling handling of asynchronous operations.
Q30: What is an Observable? rxjs
An Observable is a lazy collection of events that can be observed over time using subscribe().
Q31: What is a Subject? rxjs
A Subject is a special observable that multicasts values to multiple subscribers.
Q32: What is a BehaviorSubject? rxjs
A BehaviorSubject is a subject that emits its current value to new subscribers immediately.
Q33: What is a ReplaySubject? rxjs
A ReplaySubject buffers and replays a specified number of values to new subscribers.
Q34: What is an AsyncSubject? rxjs
An AsyncSubject emits the last value of a sequence only when the observable completes.
Q35: What are operators? rxjs
Operators are functions that transform, filter, or combine observable values, e.g., map, filter, switchMap.
Q36: What is the map operator? rxjs
The map operator transforms observable values using a projection function.
Q37: What is the filter operator? rxjs
The filter operator emits only observable values that pass a predicate test.
Q38: What is the switchMap operator? rxjs
The switchMap operator projects each source value to an observable and flattens, canceling previous inner observables.
Q39: What is the mergeMap operator? rxjs
The mergeMap operator projects each value to an observable and flattens all inner observables.
Q40: What is the concat operator? rxjs
The concat operator sequentially concatenates multiple observables in order.
Q41: What is the merge operator? rxjs
The merge operator combines multiple observables and emits values from all simultaneously.
Q42: What is reactive forms? forms
Reactive forms provide a model-driven approach using FormGroup, FormControl for complex form handling.
Q43: What is template-driven forms? forms
Template-driven forms use directives in templates with ngModel for simpler form handling.
Q44: What is FormGroup? forms
FormGroup manages a group of FormControls, allowing validation and status tracking of the entire form.
Q45: What is FormControl? forms
FormControl is the lowest-level unit tracking value and validation status of an individual form field.
Q46: What is FormBuilder? forms
FormBuilder provides shortcuts for creating FormGroup and FormControl instances.
Q47: What are validators? forms
Validators are functions that check form control values and return errors if validation fails.
Q48: What is async validation? forms
Async validation validates form controls asynchronously, e.g., checking username availability from server.
Q49: What is the HttpClient? http
HttpClient is Angular's service for making HTTP requests to servers for communication.
Q50: What is an interceptor? http
An interceptor intercepts HTTP requests/responses to add headers, handle errors, or transform data.
Q51: What is the async pipe? pipes
The async pipe subscribes to observables and automatically unsubscribes when components destroy.
Q52: What is routing? routing
Routing enables navigation between different components/pages using URLs without full page reload.
Q53: What is RouterModule? routing
RouterModule provides routing functionality including Router, ActivatedRoute services and routes configuration.
Q54: What is the Router service? routing
The Router service navigates between components using navigate() or navigateByUrl() methods.
Q55: What is ActivatedRoute? routing
ActivatedRoute provides access to route parameters and query parameters of the current route.
Q56: What is a route guard? routing
A route guard (CanActivate, CanDeactivate, Resolve) controls access to routes based on conditions.
Q57: What is CanActivate? routing
CanActivate guard prevents access to a route based on conditions, e.g., authentication.
Q58: What is CanDeactivate? routing
CanDeactivate guard prevents navigation away from a route, e.g., unsaved form data warning.
Q59: What is Resolve? routing
Resolve guard pre-fetches data before activating a route, ensuring data is available when component loads.
Q60: What is lazy loading? routing
Lazy loading loads feature modules only when users navigate to them, improving initial load performance.
Q61: What is change detection? core
Change detection is Angular's mechanism to detect component state changes and update the view accordingly.
Q62: What is OnInit? lifecycle
OnInit is a lifecycle hook called once after component initialization, used for setup and initialization.
Q63: What is OnDestroy? lifecycle
OnDestroy is a lifecycle hook called before component destruction, used for cleanup and unsubscribing.
Q64: What is OnChanges? lifecycle
OnChanges is a lifecycle hook called when component receives input property changes.
Q65: What is DoCheck? lifecycle
DoCheck is a custom change detection hook called during every change detection cycle.
Q66: What is AfterViewInit? lifecycle
AfterViewInit is a lifecycle hook called after component view and child views initialize.
Q67: What is Input decorator? decorators
@Input allows parent components to pass data to child components via properties.
Q68: What is Output decorator? decorators
@Output allows child components to emit events to parent components using EventEmitter.
Q69: What is ViewChild? decorators
@ViewChild gets reference to a template element or child component in the component class.
Q70: What is ViewChildren? decorators
@ViewChildren gets references to multiple template elements or child components.
Q71: What is ContentChild? decorators
@ContentChild gets reference to projected content elements.
Q72: What is ContentChildren? decorators
@ContentChildren gets references to multiple projected content elements.
Q73: What is content projection? components
Content projection inserts component content into designated slots in child component template.
Q74: What is ng-content? templates
ng-content is a placeholder in component template where parent component content is inserted.
Q75: What is an element reference? templates
Element reference (template reference variable) provides direct access to DOM elements in component logic.
Q76: What is ElementRef? core
ElementRef wraps a native DOM element, providing access to the underlying native object.
Q77: What is Renderer2? core
Renderer2 is a service for safely manipulating DOM without direct native element access.
Q78: What are lifecycle hooks? lifecycle
Lifecycle hooks are callback methods called at specific moments during component lifecycle progression.
Q79: What is zone.js? core
Zone.js is a library providing execution context (zone) for change detection triggering in Angular.
Q80: What is NgZone? core
NgZone is Angular service for running code inside/outside Angular zone, controlling change detection.
Q81: What is property binding vs attribute binding? binding
Property binding sets DOM properties; attribute binding sets HTML attributes.
Q82: What is @HostBinding? decorators
@HostBinding binds a class property to host element's property or attribute.
Q83: What is @HostListener? decorators
@HostListener subscribes to host element events like click, mouseover, etc.
Q84: What is AOT compilation? build
AOT (Ahead-of-Time) compilation pre-compiles Angular application during build, improving performance.
Q85: What is JIT compilation? build
JIT (Just-in-Time) compilation compiles Angular application in the browser at runtime.
Q86: What is a module vs a component? core
A module organizes code; a component is an individual UI element with view and logic.
Q87: What is tree shaking? build
Tree shaking removes unused code during production build to reduce bundle size.
Q88: What is lazy loading modules? routing
Lazy loading loads feature modules only when needed, improving initial app load time.
Q89: What is providedIn? services
@Injectable({providedIn: 'root'}) provides service at root level, enabling tree-shaking.
Q90: What is testing in Angular? testing
Testing verifies Angular component behavior using Jasmine testing framework and Karma test runner.
Q91: What is Jasmine? testing
Jasmine is a JavaScript testing framework with describe, it, expect syntax for unit testing.
Q92: What is Karma? testing
Karma is a test runner that executes Jasmine tests in real browsers.
Q93: What is TestBed? testing
TestBed is an Angular testing utility for configuring modules and injecting services in tests.
Q94: What is fixture? testing
A fixture is a wrapper around a component, providing testing utilities for component interaction.
Q95: What is DebugElement? testing
DebugElement wraps component elements, providing testing utilities for querying and debugging.