Q1
What is AngularJS and how does it differ from Angular?
Beginner
AngularJS (Angular 1.x) is a JavaScript-based open-source front-end framework created by Google.
It follows MVC architecture and supports two-way data binding using scope.
Angular (2+) is a modern rewrite built with TypeScript. It uses a component-based architecture, has better performance, improved tooling, and a more scalable structure for modern applications.
Angular (2+) is a modern rewrite built with TypeScript. It uses a component-based architecture, has better performance, improved tooling, and a more scalable structure for modern applications.
| Feature | AngularJS | Angular |
|---|---|---|
| Language | JavaScript | TypeScript |
| Architecture | MVC | Component-based |
| Data Binding | Two-way | One-way + events |
| Performance | Older and slower | Faster and modern |
#AngularJS vs Angular
#Angular architecture
#Angular interview
Q2
What are Angular Components? Explain with an example.
Beginner
A Component is the main building block of Angular UI.
Each component controls a part of the screen and includes template, logic, metadata, and styles.
- Template – HTML view
- Class – TypeScript logic
- Metadata –
@Componentdecorator - Styles – component-specific CSS
@Component({
selector: 'app-hello',
template: `<h1>Hello, {{ name }}!</h1>`
})
export class HelloComponent {
name: string = 'Angular';
}
#Angular components
#Component decorator
#Angular UI
Q3
What is Data Binding in Angular? Explain all types.
Beginner
Data binding connects component data with the UI. Angular supports multiple binding types to pass data between the view and component.
| Type | Syntax | Direction |
|---|---|---|
| Interpolation | {{ value }} | Component to View |
| Property Binding | [property]="value" | Component to View |
| Event Binding | (event)="handler()" | View to Component |
| Two-way Binding | [(ngModel)]="value" | Both directions |
#Data binding
#ngModel
#Angular basics
Q4
What are Directives in Angular? Explain types with examples.
Beginner
Directives let you extend or change the behavior of HTML elements in Angular.
- Component Directives – directives with template
- Structural Directives – modify DOM structure like
*ngIfand*ngFor - Attribute Directives – change appearance or behavior like
ngClass
#Angular directives
#ngIf
#ngFor
Q5
What is Dependency Injection in Angular?
Beginner
Dependency Injection (DI) is a design pattern where a class gets the services or dependencies it needs from outside,
instead of creating them itself. Angular uses a built-in DI system to make applications cleaner and more reusable.
#Dependency Injection
#Angular services
#Injectable
Q6
What is an Angular Module (NgModule)?
Beginner
An NgModule is a container that groups related components, directives, pipes, and services.
It helps organize Angular applications into functional sections.
Tip: In modern Angular, standalone components are becoming more common, but NgModule is still a very common interview topic.
#NgModule
#Angular architecture
#AppModule
Q7
What is the Angular Component Lifecycle?
Beginner
Angular components move through different lifecycle stages from creation to destruction.
Angular provides lifecycle hooks to run custom logic at each stage.
| Hook | Purpose |
|---|---|
| ngOnChanges | Runs when input changes |
| ngOnInit | Runs after component initialization |
| ngDoCheck | Custom change detection |
| ngAfterViewInit | Runs after view initialization |
| ngOnDestroy | Runs before destroy |
#Lifecycle hooks
#ngOnInit
#ngOnDestroy
Q8
What are Angular Pipes? How do you create a custom pipe?
Beginner
Pipes transform data in templates for display. Angular provides built-in pipes such as
date, currency, uppercase, and async.
You can also create custom pipes to format values your own way.
#Angular pipes
#Custom pipe
#Async pipe
Q9
What is Angular Routing and how do you set it up?
Intermediate
Angular Routing allows navigation between different views or components in a single-page application.
It is set up using the Angular Router and route configuration.
#Angular routing
#RouterModule
#SPA navigation
Q10
What is Lazy Loading in Angular? Why is it important?
Intermediate
Lazy Loading means loading feature modules only when they are needed.
This reduces initial bundle size and improves app loading performance.
Why important: it improves startup speed, reduces unnecessary downloads, and makes large Angular apps more efficient.
#Lazy loading
#Angular performance
#Code splitting
Q11
What is RxJS and how is it used in Angular?
Intermediate
RxJS is a library for reactive programming using Observables. Angular uses RxJS heavily for
HTTP requests, event streams, async data handling, and state-based interactions.
this.http.get<User[]>('/api/users')
.pipe(
map(users => users.filter(user => user.active))
)
.subscribe(result => console.log(result));
#RxJS Angular
#Observable
#Reactive programming
Q12
What is the difference between Observable and Promise?
Intermediate
| Feature | Observable | Promise |
|---|---|---|
| Values | Multiple values over time | Single value |
| Lazy / Eager | Lazy | Eager |
| Cancellation | Yes | No |
| Operators | Rich operators | Limited chaining |
Observables are more powerful in Angular because they work naturally with streams, retries, cancellation, and operators.
#Observable vs Promise
#Angular async
#RxJS
Q13
What is Angular HttpClient? How do you make HTTP requests?
Intermediate
HttpClient is Angular’s built-in module for making HTTP requests. It supports GET, POST, PUT,
DELETE, typed responses, interceptors, and RxJS Observables.
constructor(private http: HttpClient) {}
getUsers() {
return this.http.get<User[]>('/api/users');
}
createUser(user: User) {
return this.http.post('/api/users', user);
}
#Angular HttpClient
#API calls
#Angular REST
Q14
What are Angular Guards? Explain CanActivate and CanDeactivate.
Intermediate
- CanActivate – decides whether a user can access a route
- CanDeactivate – decides whether a user can leave a route
- CanLoad – controls lazy-loaded modules
- Resolve – preloads data before opening the route
canActivate(): boolean {
if (this.auth.isLoggedIn()) return true;
this.router.navigate(['/login']);
return false;
}
#Angular guards
#CanActivate
#Route protection
Q15
What is Change Detection in Angular? What are strategies?
Intermediate
Change Detection is the process Angular uses to update the DOM when component data changes.
The two main strategies are Default and OnPush.
| Strategy | Behavior |
|---|---|
| Default | Checks more often, easier to use |
| OnPush | More optimized, runs on reference changes and explicit triggers |
#Change detection
#OnPush
#Angular performance
Q16
What are Angular Services and how do they differ from Components?
Intermediate
| Service | Component | |
|---|---|---|
| Purpose | Business logic / shared logic | UI rendering |
| Template | No | Yes |
| Reuse | High | UI-focused |
#Angular services
#Service vs Component
#Injectable
Q17
What are Angular Forms? Explain Template-Driven vs Reactive Forms.
Intermediate
| Feature | Template-Driven | Reactive |
|---|---|---|
| Logic | In template | In component class |
| Best for | Simple forms | Complex forms |
| Testing | Harder | Easier |
#Angular forms
#Reactive forms
#Template-driven
Q18
What are HTTP Interceptors in Angular?
Intermediate
HTTP Interceptors let you inspect or modify requests and responses globally. They are often used
for auth tokens, logging, centralized error handling, and loaders.
#HTTP interceptor
#JWT token
#Global error handling
Q19
What is @Input() and @Output() in Angular?
Intermediate
@Input() sends data from parent to child. @Output() sends events from child to parent
using an EventEmitter.
@Input() title: string;
@Output() clicked = new EventEmitter<string>();
#Input Output
#Parent child communication
#EventEmitter
Q20
What is ViewChild and ContentChild in Angular?
Intermediate
ViewChild lets you access a child component, directive, or DOM element inside the component’s own template.
ContentChild lets you access projected content passed through
ng-content.
#ViewChild
#ContentChild
#DOM access
Q21
What is Angular Ivy? What are its benefits?
Advanced
- Smaller bundle sizes
- Faster compilation
- Better debugging
- Improved template type checking
- Helps modern Angular features work better
#Angular Ivy
#Compilation
#Performance
Q22
What are Standalone Components in Angular?
Advanced
Standalone Components are Angular components that do not need an NgModule.
They directly declare their own dependencies through the
imports array.
#Standalone components
#Modern Angular
#bootstrapApplication
Q23
What is NgRx? When would you use it?
Advanced
NgRx is a Redux-style state management library for Angular. It is useful in large applications where
many components need to share predictable state.
Use NgRx when your application has complex shared state, multiple async flows, and you want predictable data updates.
#NgRx
#State management
#Redux Angular
Q24
What are Angular Signals? Explain the new reactivity model.
Advanced
Angular Signals are a newer reactivity model that updates dependent values when data changes.
They help Angular track changes in a more fine-grained and modern way.
count = signal(0);
doubled = computed(() => this.count() * 2);
#Angular Signals
#Reactivity
#Computed signals
Q25
What is Angular Universal (SSR)? Why use Server-Side Rendering?
Advanced
- Better SEO
- Faster first contentful paint
- Improved Core Web Vitals
- Better social sharing previews
ng add @angular/ssr
#Angular Universal
#SSR
#Angular SEO
Q26
What are Angular Resolvers? How do they work?
Advanced
A Resolver is a route service that fetches data before the route is activated, so the component
gets ready-to-use data when it loads.
resolve(route: ActivatedRouteSnapshot) {
return this.userService.getUser(route.params['id']);
}
#Angular resolver
#Pre-fetch data
#Route data loading
Q27
What is the async pipe in Angular? When should you use it?
Intermediate
The async pipe subscribes to an Observable or Promise and returns the latest value.
It also automatically unsubscribes when the component is destroyed, helping prevent memory leaks.
users$ = this.http.get<User[]>('/api/users');
<div *ngFor="let user of users$ | async">
{{ user.name }}
</div>
Best practice: prefer the async pipe over manual subscription in templates when possible.
#Async pipe
#Memory leak prevention
#Angular best practices
Q28
What is ng-template, ng-container, and ng-content?
Intermediate
| Element | Purpose |
|---|---|
| ng-template | Reusable template fragment, not rendered directly |
| ng-container | Logical wrapper without extra DOM |
| ng-content | Content projection into a component |
<ng-container *ngIf="isAdmin">
<button>Delete</button>
</ng-container>
<app-card>
<p>Projected content here</p>
</app-card>
#ng-template
#ng-container
#ng-content
Q29
What is trackBy in Angular and why should you use it with ngFor?
Intermediate
trackBy helps Angular identify list items uniquely when rendering with
*ngFor.
It improves performance by avoiding unnecessary DOM re-creation.
#trackBy
#ngFor performance
Q30
What is Ahead-of-Time (AOT) compilation in Angular?
Advanced
AOT compilation converts Angular templates and components into efficient JavaScript during build time,
leading to faster rendering and earlier template error detection.
#AOT
#Angular build optimization
Q31
What is Just-in-Time (JIT) compilation in Angular?
Advanced
JIT compilation compiles the application in the browser during runtime. It is useful in development,
but AOT is generally preferred for production performance.
#JIT
#Angular compilation
Q32
What is the difference between constructor and ngOnInit?
Intermediate
The constructor is used for dependency injection and basic setup.
ngOnInit is used for component initialization logic after Angular sets input properties.
#constructor vs ngOnInit
#Lifecycle
Q33
What is the difference between Subject, BehaviorSubject, and ReplaySubject?
Advanced
Subject emits to current subscribers only.
BehaviorSubject keeps the latest value and gives it to new subscribers.
ReplaySubject replays previous values to new subscribers.
#Subject
#BehaviorSubject
#ReplaySubject
Q34
What is zone.js in Angular?
Advanced
zone.js helps Angular detect async operations and know when to trigger change detection automatically.
#zone.js
#Change detection
Q35
What is content projection in Angular?
Intermediate
Content projection allows you to pass external content into a component using
ng-content.
It is similar to slots in web components.
#Content projection
#ng-content
Q36
What is a custom directive in Angular?
Intermediate
A custom directive lets you create reusable behavior that can be attached to elements,
such as highlighting, access control, or interaction handling.
#Custom directive
#Angular directives
Q37
How do you optimize performance in Angular applications?
Advanced
- Use lazy loading
- Use OnPush change detection
- Use trackBy with ngFor
- Avoid unnecessary subscriptions
- Use async pipe where possible
- Split large components
#Angular performance
#Lazy loading
#OnPush
Q38
What is dependency injection hierarchy in Angular?
Advanced
Angular resolves services using an injector hierarchy. A service can be provided at the root,
module, component, or directive level, which affects its scope and instance sharing.
#DI hierarchy
#Angular injector
Q39
What is a pure pipe vs impure pipe in Angular?
Advanced
A pure pipe runs only when input references change. An impure pipe runs on every
change detection cycle and can be more expensive.
#Pure pipe
#Impure pipe
Q40
How do you handle errors in Angular applications?
Advanced
- Use Http Interceptors for API errors
- Use try/catch where appropriate
- Use RxJS
catchError - Create reusable error UI
- Log important issues centrally
#Angular error handling
#catchError
#HTTP interceptor