Skip to main content

Angular Interview Question Cheat Sheet | RG Dimension

Top 40 Angular Intermediate Interview Questions and Answers (2025) | rgdimension

Top 40 Angular Intermediate Interview Questions and Answers (2025)

1. What are Lifecycle Hooks in Angular?

Lifecycle hooks allow developers to tap into key moments of a component's life, such as creation, change detection, and destruction.

  • ngOnInit() – runs once after component initialization
  • ngOnChanges() – called when input properties change
  • ngOnDestroy() – called before a component is destroyed

2. What is ViewEncapsulation in Angular?

It defines how CSS styles are applied to components. Options include:

  • Emulated (default) – styles scoped to the component
  • None – global styles
  • ShadowDom – uses native Shadow DOM

3. What is ChangeDetectionStrategy?

It controls how Angular checks for changes in components:

  • Default: checks all components
  • OnPush: checks only when input properties change or an event occurs

4. What is the difference between Template-driven and Reactive Forms?

Template-driven forms are simple and use directives, while Reactive Forms use FormControl and FormGroup for better validation and scalability.

this.form = new FormGroup({ name: new FormControl('', Validators.required) });

5. What are Custom Directives?

Custom directives extend HTML behavior. They can manipulate DOM or listen to events.

@Directive({ selector: '[appHighlight]' }) export class HighlightDirective { constructor(el: ElementRef) { el.nativeElement.style.backgroundColor = 'yellow'; } }

6. What is the difference between Observable and Promise?

Observables are lazy, support multiple values, and can be canceled. Promises are eager and handle only one value.

7. What is an AsyncPipe?

AsyncPipe subscribes to Observables or Promises and automatically updates the template.

<div>{{ data$ | async }}</div>

8. What are Subjects in RxJS?

Subjects are special Observables that act as both an observer and observable. They multicast values to many subscribers.

9. What is a BehaviorSubject?

It is a type of Subject that holds the latest value and emits it immediately to new subscribers.

10. What is a ReplaySubject?

ReplaySubject replays old values to new subscribers up to a specified buffer size.

11. What is RouterModule.forRoot() and forChild()?

forRoot() configures the router at the application’s root level, while forChild() configures routes in feature modules.

12. What are Route Parameters?

They pass dynamic values to routes.

{ path: 'user/:id', component: UserComponent }

13. What are Route Guards?

They control navigation using interfaces like CanActivate, CanDeactivate, Resolve, and CanLoad.

14. What is the difference between ActivatedRoute and Router?

ActivatedRoute provides route info of the current component, while Router is used for navigation.

15. What is Lazy Loading?

Lazy loading loads feature modules only when needed, improving performance.

16. What are Resolvers in Angular Routing?

Resolvers fetch data before route activation to ensure required data is available before component rendering.

17. What is the difference between Declarations, Imports, and Providers?

  • Declarations: Components, directives, and pipes
  • Imports: Modules to use
  • Providers: Services and dependency injections

18. What is a Service?

Service is a reusable logic unit used for data sharing, API calls, or business logic.

19. How to create a Singleton Service?

Provide the service in root level using @Injectable({ providedIn: 'root' }).

20. What is Dependency Injection Hierarchy?

It defines how and where Angular injects dependencies (root, module, or component level).

21. What are Pipes and how to create a custom one?

@Pipe({ name: 'capitalize' }) export class CapitalizePipe implements PipeTransform { transform(value: string): string { return value.charAt(0).toUpperCase() + value.slice(1); } }

22. What is Ahead-of-Time (AOT) Compilation?

AOT compiles Angular templates during build time, making apps faster and more secure.

23. What is ViewChild in Angular?

It provides access to a child component, directive, or DOM element inside a parent component.

24. What is ContentChild?

It allows access to projected content passed into a component via ng-content.

25. What are Template References?

Template references use the # symbol to access elements or components directly.

<input #userInput> <button (click)="log(userInput.value)">Log</button>

26. What is Renderer2?

Renderer2 is an Angular service that provides an abstraction layer for manipulating the Document Object Model (DOM) safely and consistently across different platforms. Instead of directly accessing the DOM, developers use Renderer2 methods to create, modify, and remove elements, set styles, and handle events, which makes applications more compatible with environments like server-side rendering and web workers.

27. What is ng-content?

ng-content projects external content into a component’s template (content projection).

28. What is the difference between ng-template and ng-container?

  • ng-template: defines reusable template fragments
  • ng-container: groups elements without adding extra DOM nodes

29. What is trackBy in ngFor?

Improves performance by tracking list items uniquely.

<div *ngFor="let item of items; trackBy: trackById">{{ item.name }}</div>

30. What are Interceptors?

HTTP Interceptors modify requests or responses globally, useful for authentication and logging.

31. What is HttpClientModule?

It provides HTTP communication features for interacting with APIs.

32. What are Angular Animations?

Angular provides @angular/animations for smooth transitions using triggers and states.

33. What is Zone.js?

Zone.js helps Angular detect async operations and trigger change detection automatically.

34. What is Ivy in Angular?

Ivy is the Angular rendering engine that improves performance and reduces bundle size.

35. What are Standalone Components?

Introduced in Angular 14, standalone components remove the need for NgModules and simplify code.

36. What is NgZone?

It allows developers to run code inside or outside Angular’s change detection zone for performance tuning.

37. What is a Pure Pipe?

Pure pipes execute only when input data changes, enhancing performance.

38. What are Angular Decorators?

Decorators add metadata to classes, properties, or methods — e.g., @Component, @Injectable, @NgModule.

39. What is the difference between TemplateRef and ViewRef?

TemplateRef represents a template, while ViewRef represents an instantiated view created from that template.

40. What is State Management in Angular?

State management maintains data consistency using libraries like NgRx, Akita, or simple services.

Conclusion

These 40 Angular intermediate interview questions cover key topics such as forms, directives, RxJS, dependency injection, routing, and Angular architecture. Understanding these will help you excel in interviews for mid-level Angular roles in 2025 and beyond.

#angular_interview_rgdimension
#rgdimension
#frontend_development
#angular_tutorial
Labels:

Popular posts from this blog

25 Angular Intermediate Interview Questions & Answers | RG Dimension

25 Angular Intermediate Interview Questions and Answers (2025 Edition) | rgdimension 25 Angular Intermediate Interview Questions & Answers (Updated for Angular 17–18) Concise, clear answers covering modern Angular (standalone components, signals, inject(), hydration, control-flow, DI, RxJS, performance, and testing). Courtsey: Pexels 1. What are standalone components and when should you use them? Standalone components (introduced and stabilized in recent Angular releases) allow components, directives, and pipes to be declared without NgModules; they declare their own dependencies via the standalone: true flag and import array, which simplifies app structure, reduces boilerplate, and makes lazy-loading and micro-frontends easier — prefer standalone components for new features and greenfield apps while incrementally migrating module-based code when beneficial. /* e...
Read

CSS Flexbox: Understanding the basics

Understanding CSS Flexbox: A Complete Guide Understanding CSS Flexbox: A Complete Guide What Is Flexbox? Flexbox, or the Flexible Box Layout, is a CSS layout module designed to align and distribute space among items in a container, even when their sizes are dynamic or unknown. It simplifies creating responsive and flexible web designs. Why Use Flexbox? Flexbox eliminates complex float and positioning hacks. It allows developers to easily align elements vertically and horizontally and to control spacing, order, and responsiveness effortlessly. How Flexbox Works When you apply display: flex; to a container, it becomes a flex container. All its direct children become flex items that follow the Flexbox rules for layout a...
Read

CSS Interview Questions And Answers

50 CSS Interview Questions and Answers 50 CSS Interview Questions and Answers 1. What does CSS stand for? CSS stands for Cascading Style Sheets. It’s used to style and layout web pages. 2. What is the difference between inline, internal, and external CSS? Inline CSS applies styles directly to elements, internal CSS is within a <style> tag in HTML, and external CSS uses a separate .css file. 3. What are CSS selectors? Selectors are patterns used to select and style elements on a web page. 4. What is the use of the z-index property? z-index controls the stacking order of elements that overlap. 5. What are pseudo-classes in CSS? Pseudo-classes define a special state of an element, like :hover or :focus. 6. What are pseudo-elements? Pseudo-elements style specific parts of an element, like :...
Read