Basic Angular Interview Questions
1. What is Angular and why was it introduced?
Angular is a client-side framework for building dynamic web applications. It was introduced to simplify development by providing structure through modules, components, data binding, and dependency injection, making apps more maintainable and scalable.[1][7]
2. How does an Angular application work?
An Angular app bootstraps from main.ts with AppModule and AppComponent. Modules group features, components build UI with templates and logic, data binding links view and model, directives modify DOM, services share logic, routing handles navigation, and change detection updates the DOM.[1]
3. What are Angular modules and their purpose?
Angular modules organize and encapsulate related functionality like components, directives, pipes, and services. They promote reusability, manage dependencies, and enable lazy loading for better performance.[2]
4. What is a component in Angular?
A component controls a portion of the screen with its own template, logic, and styles. It is defined by a class with @Component decorator specifying the template and selector.[1][8]
5. Explain data binding in Angular.
Angular supports two-way data binding, property binding ([property]), event binding ((event)), and interpolation ({{expression}}) to synchronize data between component and view.[1][3]
6. What are Angular templates?
Templates define the view using HTML with Angular directives like *ngFor and *ngIf, property binding, event binding, and interpolation for dynamic content.[2]
7. What is TypeScript in Angular?
TypeScript is a superset of JavaScript used in Angular for static typing, interfaces, and better tooling, improving code quality and developer productivity.[3]
8. List the Angular component lifecycle hooks.
Key lifecycle hooks include: ngOnInit after data-bound properties initialize, ngOnChanges on input changes, ngDoCheck for custom checks, ngAfterViewInit after view initialization, and ngOnDestroy for cleanup.[1][3][4]
9. What is the difference between ngOnInit and constructor?
Constructor is for dependency injection initialization. ngOnInit is called once after data-bound properties are set, ideal for initialization logic.[1][3]
10. What are directives in Angular?
Directives extend HTML: structural like *ngIf and *ngFor modify DOM layout, attribute directives like ngClass change appearance or behavior.[8]
Intermediate Angular Interview Questions
11. What is dependency injection in Angular?
Dependency injection provides services to components via constructor parameters. Services are registered in modules or components, promoting reusability and testability.[1][6]
12. How do you create a service in Angular?
Use Angular CLI: ng generate service data. Decorate with @Injectable() and provide in module or component for injection.[1]
13. What is Angular routing?
Routing enables navigation between views using RouterModule. Define routes in RouterModule.forRoot() or forChild() and use router-outlet in templates.[1]
14. Explain HttpClient in Angular.
HttpClient is a module for HTTP requests with methods like get(), post(). Import HttpClientModule and inject HttpClient service.[2]
import { HttpClient } from '@angular/common/http';
constructor(private http: HttpClient) {}
getData() {
return this.http.get('/api/data');
}15. What are pipes in Angular?
Pipes transform data in templates like {{value | date}} or {{value | uppercase}}. Create custom pipes with @Pipe decorator.[1]
16. How do you handle forms in Angular?
Angular supports template-driven and reactive forms. Reactive forms use FormBuilder, FormGroup, and FormControl for complex validation.[1]
17. What is lazy loading in Angular?
Lazy loading loads feature modules on demand via routing with loadChildren, reducing initial bundle size and improving performance.[2]
{ path: 'feature', loadChildren: () => import('./feature.module').then(m => m.FeatureModule) }18. Explain *ngFor with trackBy.
*ngFor iterates lists. Use trackBy function to improve performance by identifying unchanged items during change detection.[1][5]
trackByFn(index: number, item: any): any { return item.id; }19. What is the async pipe?
async pipe subscribes to observables or promises in templates, auto-unsubscribes on destroy, simplifying async data handling.[6]
20. How do you share data between components?
Use services with subjects/observables, input/output properties for parent-child, or router state for routed components.[5][6]
Advanced Angular Interview Questions
21. What is change detection in Angular?
Angular detects changes using zone.js, running checks on async events. Strategies: Default (checks everything) or OnPush (checks only on input changes).[1][5]
22. Explain OnPush change detection strategy.
OnPush marks components to check only on input reference changes or manual triggers, optimizing performance in large apps.[5]
23. What is NgZone and when to use runOutsideAngular?
NgZone monkey-patches async APIs for change detection. Use runOutsideAngular for non-UI tasks like heavy computations to avoid unnecessary checks.[5]
24. How do you optimize Angular app performance?
Use tree shaking, minification, trackBy with ngFor, OnPush strategy, lazy loading, and service workers for caching.[1]
25. What are Angular signals?
Signals are a reactive primitive for fine-grained reactivity, replacing zones in future Angular versions for better performance.[5]
26. Scenario: At Zoho, how would you implement parent-child component communication?
Use @Input for parent-to-child data and @Output with EventEmitter for child-to-parent events.[5]
27. What is the difference between providers and viewProviders?
providers creates services for component and children. viewProviders limits to view hierarchy, useful for view-encapsulated services.[5]
28. Scenario: In a Paytm-like app, handle large lists efficiently.
Implement OnPush, trackBy in ngFor, virtual scrolling with CDK, and lazy loading data via observables with async pipe.[1][5]
29. How to create a custom error handler in Angular?
Extend ErrorHandler, override handleError, and provide in providers array of the module.[3]
@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
handleError(error: any) {
console.error('Global error:', error);
}
}30. Scenario: At Salesforce, optimize a dashboard with real-time updates.
Use signals or RxJS with shareReplay, OnPush everywhere, change detection detached for static parts, and WebSockets via service.[5][6]
