Angular Quiz ( Intermediate ) - All Questions

This intermediate Angular quiz is designed for developers who already understand Angular basics and want to strengthen their real-world skills. It focuses on component communication, services, routing, forms, observables, change detection, and common interview-level scenarios.

Question 1: What is the main purpose of Angular services?

Define UI layout
Share data and logic across components
Handle routing only
Manage templates

Explanation: Services are used to share reusable business logic and data.

Question 2: Which Angular feature allows parent-to-child communication?

@Output()
@Injectable()
@Input()
@ViewChild()

Explanation: @Input allows data to flow from parent to child.

Question 3: Which decorator is used for child-to-parent communication?

@Input()
@Output()
@HostListener()
@ViewChild()

Explanation: @Output emits events from child to parent.

Question 4: What type of object does @Output() use?

Promise
Observable
EventEmitter
Subject

Explanation: EventEmitter is used to emit custom events.

Question 5: What is the main role of Angular Router?

API calls
State management
Navigation between views
Form validation

Explanation: Angular Router enables navigation between components.

Question 6: Which guard prevents access to a route?

CanLoad
CanActivate
Resolve
Deactivate

Explanation: CanActivate controls route access.

Question 7: Which guard prevents lazy-loaded modules from loading?

CanActivate
CanDeactivate
CanLoad
Resolve

Explanation: CanLoad stops loading of lazy modules.

Question 8: What is lazy loading in Angular?

Loading components at startup
Loading modules only when needed
Delaying API calls
Caching templates

Explanation: Lazy loading loads modules on demand.

Question 9: Which lifecycle hook is called when input properties change?

ngOnInit
ngOnChanges
ngAfterViewInit
ngDoCheck

Explanation: ngOnChanges runs when input values change.

Question 10: What is ngDoCheck used for?

Manual change detection
Initialization logic
View rendering
Cleanup

Explanation: ngDoCheck allows custom change detection.

Question 11: What is an Observable in Angular?

A synchronous function
A data stream over time
A promise wrapper
A callback handler

Explanation: Observables represent asynchronous data streams.

Question 12: Which library provides Observables in Angular?

Zone.js
RxJS
Lodash
Moment.js

Explanation: RxJS provides Observable support.

Question 13: What does subscribe() do on an Observable?

Stops data flow
Transforms data
Executes the observable
Creates an observable

Explanation: subscribe starts listening to emitted values.

Question 14: Which operator transforms emitted values?

filter()
map()
subscribe()
tap()

Explanation: map transforms values in the stream.

Question 15: Which operator filters emitted values?

map()
merge()
filter()
scan()

Explanation: filter allows selective emission.

Question 16: What is the async pipe used for?

HTTP requests
Automatic subscription handling
Routing
Form validation

Explanation: Async pipe subscribes and unsubscribes automatically.

Question 17: Which form type uses FormControl and FormGroup?

Template-driven forms
Reactive forms
Hybrid forms
Dynamic forms

Explanation: Reactive forms use FormControl and FormGroup.

Question 18: Which module is required for reactive forms?

FormsModule
BrowserModule
ReactiveFormsModule
CommonModule

Explanation: ReactiveFormsModule enables reactive forms.

Question 19: Which form approach scales better for complex forms?

Template-driven
Reactive
Inline forms
Dynamic HTML forms

Explanation: Reactive forms scale better for complex logic.

Question 20: What does FormGroup represent?

Single input
Group of form controls
Validation rule
HTML form

Explanation: FormGroup groups multiple controls.

Question 21: Which pipe is used to format dates?

json
currency
date
async

Explanation: Date pipe formats date values.

Question 22: Which pipe formats numbers as currency?

number
currency
percent
decimal

Explanation: Currency pipe formats monetary values.

Question 23: What is a custom pipe?

Built-in formatter
Reusable data transformer
Service wrapper
Directive alias

Explanation: Custom pipes transform data for display.

Question 24: Which Angular feature handles global error handling?

HttpInterceptor
ErrorHandler
ExceptionService
Zone.js

Explanation: ErrorHandler handles global errors.

Question 25: What is an HttpInterceptor?

Route guard
HTTP request modifier
Form validator
Change detector

Explanation: Interceptors modify HTTP requests and responses.

Question 26: Which use case fits HttpInterceptors?

Template rendering
Adding auth headers
Component creation
DOM manipulation

Explanation: Interceptors commonly attach auth headers.

Question 27: What is change detection in Angular?

DOM replacement
View update mechanism
API polling
Routing strategy

Explanation: Change detection updates the view on data change.

Question 28: Which change detection strategy improves performance?

Default
Manual
OnPush
Detached

Explanation: OnPush reduces unnecessary checks.

Question 29: What triggers change detection?

Only user clicks
Async events and data changes
Routing only
Manual calls only

Explanation: Angular runs change detection on async events.

Question 30: Which decorator accesses a child component instance?

@Input()
@Output()
@ViewChild()
@ContentChild()

Explanation: @ViewChild accesses child component references.

Question 31: What does ng-content enable?

Lazy loading
Content projection
Routing
Form binding

Explanation: ng-content projects external content.

Question 32: Which Angular feature helps reuse UI logic?

Modules
Services
Directives
Pipes

Explanation: Directives reuse DOM behavior.

Question 33: What is the purpose of CommonModule?

Browser support
Core directives and pipes
Routing
Forms

Explanation: CommonModule provides ngIf, ngFor, pipes.

Question 34: Which lifecycle hook runs after the view initializes?

ngOnInit
ngAfterViewInit
ngOnChanges
ngAfterContentInit

Explanation: ngAfterViewInit runs after view creation.

Question 35: What is a resolver in Angular routing?

Guard replacement
Pre-fetch route data
Lazy loader
Error handler

Explanation: Resolvers fetch data before navigation.

Question 36: Which decorator registers a class as injectable?

@Component
@NgModule
@Injectable
@Directive

Explanation: @Injectable enables dependency injection.

Question 37: What is providedIn: 'root' used for?

Lazy loading
Global service registration
Component scope
Module export

Explanation: It provides a singleton service globally.

Question 38: Which file controls TypeScript compilation?

angular.json
package.json
tsconfig.json
main.ts

Explanation: tsconfig.json controls TS compilation.

Question 39: What does ngFor trackBy improve?

Security
Rendering performance
Form validation
Routing speed

Explanation: trackBy reduces DOM re-rendering.

Question 40: Which Angular feature helps unsubscribe automatically?

Subject
Promise
Async pipe
Zone.js

Explanation: Async pipe handles subscriptions automatically.

Question 41: What is the purpose of environment files?

Styling
Build-specific configuration
Routing
Testing only

Explanation: Environment files manage environment-specific configs.

Question 42: Which command builds Angular for production?

ng serve
ng build
ng build --prod
ng compile

Explanation: --prod creates an optimized build.

Question 43: Which Angular concept promotes separation of concerns?

Components and services
Templates only
Directives only
Modules only

Explanation: Components handle UI, services handle logic.

Question 44: What is the main benefit of Angular architecture?

Minimal setup
Structured and scalable applications
Lightweight runtime
Simple scripting

Explanation: Angular is designed for scalable apps.

Back to programming Quizzes

Angular Quiz ( Intermediate )

Questions

~10

Minutes

Min Limit