Basic Level
**What is Angular and how does it differ from AngularJS?
Angular is a TypeScript-based framework for building web applications, while
AngularJS was the original JavaScript framework.
Angular is a complete rewrite with better performance, mobile support, and modern
development practices.
**Explain Angular's architecture and key building blocks.
Angular applications are built with components, services, modules, and directives.
Components control views, services provide business logic,
modules organize the app, and directives extend HTML functionality.
**What are Angular components and how do you create them?
Components are TypeScript classes that control a portion of the screen (view).
They're created using the @Component decorator and include a template, styles, and
logic.
**What is data binding in Angular?
Angular supports one-way binding (interpolation, property binding, event binding)
and two-way binding using [(ngModel)]. It automatically synchronizes data between
component and view.
**Explain Angular directives and their types.
Directives extend HTML elements. There are three types: structural directives
(*ngIf, *ngFor), attribute directives (ngClass, ngStyle), and component directives
(custom components).
Intermediate Level
**What is dependency injection in Angular?
A design pattern where Angular's injector provides dependencies to
components/services rather than creating them manually. It's configured through
providers and enables better testing and modularity.
**Explain Angular services and how they work.
Services are singleton objects that provide specific functionality across the
application. They're decorated with @Injectable() and injected into components
through the constructor.
**What are Angular lifecycle hooks?
Methods that allow you to tap into key moments in a component's lifecycle:
ngOnInit, ngOnDestroy, ngOnChanges, ngAfterViewInit, etc. They help manage
component initialization, updates, and cleanup.
**How does Angular routing work?
Angular Router enables navigation between views. You configure routes in a routing
module, use <router-outlet> for display, and navigate programmatically with Router
service or declaratively with routerLink.
**What are Angular pipes and how do you create custom ones?
Pipes transform displayed values in templates (like formatting dates or currency).
Custom pipes are created by implementing the PipeTransform interface and using the
@Pipe decorator.
Advanced Level
**Explain Angular's change detection mechanism.
Angular uses Zone.js to detect changes and runs change detection cycles to update
the DOM. It checks component tree from root to leaves, comparing current and
previous values.
**What are Angular guards and their types?
Route guards control navigation: CanActivate (can enter route), CanDeactivate (can
leave route), CanLoad (can load module), Resolve (pre-fetch data). They return
boolean, Promise, or Observable.
**How do you optimize Angular application performance?
Techniques include lazy loading modules, OnPush change detection strategy, trackBy
functions in loops, preloading strategies, tree shaking, AOT compilation, and
proper bundle splitting.
**Explain Angular's reactive forms vs template-driven forms.
Reactive forms use FormBuilder and are more scalable with explicit form model
definition. Template-driven forms use directives and are simpler but less flexible
for complex scenarios.
**What are Angular interceptors and how do you use them?
HTTP interceptors intercept outgoing requests and incoming responses. They're
useful for adding authentication headers, logging, error handling, or
request/response transformation.
Expert Level
**How does Angular's compilation process work (JIT vs AOT)?
JIT compiles templates in the browser at runtime, while AOT compiles during build
time. AOT provides better performance, smaller bundle sizes, early error detection,
and better security.
**Explain Angular's modular architecture and lazy loading.
Angular apps are organized into modules (NgModules). Lazy loading loads feature
modules on-demand, reducing initial bundle size and improving performance through
route-level code splitting.
**How do you implement custom structural directives?
Create a directive with @Directive decorator, inject TemplateRef and
ViewContainerRef, then conditionally create/destroy embedded views based on your
logic.
**What are Angular Elements and micro-frontends?
Angular Elements allows packaging Angular components as custom elements for use in
non-Angular applications. They enable micro-frontend architectures where different
frameworks coexist.
-----------------------------------------------------------------------------------
--------------------------------------------------------------
Component Communication & Data Flow
Scenario: You have a search bar component at the top of the page and a results list
component below it. They are not parent-child but siblings. How will you pass the
search term from the search bar to the results list?
Scenario: A child component updates a value, but the parent component is not
detecting the change. How will you fix it?
Scenario: You need to share the same API response between multiple components
without making multiple API calls. How will you do it?
Forms & Validation
Scenario: You have a form where From Date should not be greater than To Date. How
will you implement validation for this in Angular Reactive Forms?
Scenario: You need to display validation messages only after the user has touched
or modified the field, not on initial load.
Scenario: A form has a dropdown that should display options based on another
field’s value. How will you implement this dynamically?
Performance & Optimization
Scenario: You have a table with 5,000+ rows and filtering is slow. How will you
improve performance?
Scenario: A component is re-rendering too many times due to @Input() changes. How
will you prevent unnecessary change detection?
Scenario: How will you implement lazy loading for large feature modules to improve
load time?
Routing
Scenario: You have a page where the query parameters change but the component does
not reload. How will you make Angular reload the data when only query params
change?
Scenario: You need to protect a route so that only logged-in users can access it.
How will you implement it?
Scenario: You want to preload certain modules before the user navigates to them,
without affecting the initial load time.
API & Async Handling
Scenario: You call an API in ngOnInit() but the user navigates away before the
response arrives, causing a memory leak. How will you prevent this?
Scenario: Two API calls must be made in sequence — the second depends on the
first’s result. How will you handle it?
Scenario: You have to make multiple API calls in parallel and wait for all
responses before updating the UI.
State Management
Scenario: A list view and detail view share some state. When you update the detail
view, the list view should also update without refreshing the page.
Scenario: Your API returns partial data in multiple calls and you need to merge
them into one state object for display.
Scenario: You want to persist some state even after the user refreshes the page.
UI/UX Requirements
Scenario: A long table should have a sticky header that remains visible while
scrolling.
Scenario: You need to implement infinite scrolling with an API that returns
paginated data.
Scenario: You need to implement a confirmation dialog before deleting an item from
the table.
Error Handling
Scenario: Your API fails due to a network error and you want to show a retry button
without breaking the whole UI.
Scenario: You want to handle API errors globally without writing catchError in
every service call.
