Angular Questions

🟢 Junior / Associate Level

Focuses on core concepts and basic syntax.

1. What are the main differences between Angular and AngularJS?

• AngularJS (1.x): JavaScript-based, uses $scope, and follows a Controller-based architecture.
• Angular (2+): TypeScript-based, uses a Component-based architecture, and offers significantly better performance via AOT (Ahead-of-Time) compilation.

2. Explain the different types of Data Binding.

• Interpolation: {{ value }} (Passes data from the Component to the View).
• Property Binding: [property]="value" (Passes data from the Component to an HTML property).
• Event Binding: (event)="handler()" (Passes data/events from the View back to the Component).
• Two-way Binding: [(ngModel)]="value" (Keeps the View and Component perfectly synchronized).

3. What are Directives? Give examples. Directives add behavior to elements in the DOM.

• Component Directives: Directives with a template (the most common type—every component is a directive).
• Structural Directives: Modify the DOM layout by adding or removing elements. Note: In modern Angular, legacy directives like *ngIf and *ngFor are mostly replaced by built-in control flow blocks like @if and @for.
• Attribute Directives: Modify the appearance or behavior of an existing element (e.g., ngClass, ngStyle).

4. What is the purpose of the async pipe? It automatically subscribes to an Observable or Promise directly within the HTML template, returns the latest value emitted, and crucially, automatically unsubscribes when the component is destroyed to prevent memory leaks.

---

🟡 Intermediate / Mid-Level

Focuses on communication, lifecycle, and asynchronous programming.

1. What are Standalone Components, and why use them? Standalone components (the default as of Angular 19) remove the need for NgModule. They make components self-contained, easier to lazy-load, simpler to test, and greatly reduce boilerplate code.

2. Explain Angular Lifecycle Hooks.

• ngOnChanges: Triggered when an @Input() property changes.
• ngOnInit: Used for initialization logic right after inputs are set.
• ngAfterViewInit: Triggered after the component’s view (and its child views) are fully initialized.
• ngOnDestroy: Used for cleanup logic (e.g., manual unsubscriptions) just before the component is destroyed.

3. What is a Promise and what is an Observable? Explain the differences. Both handle asynchronous operations, but they function fundamentally differently.

• Promise (The "One-Shot" Deal): A Promise represents a single future value. It executes immediately upon creation (eager) and cannot be cancelled. Once it resolves or rejects, it is done.

const myPromise = new Promise((resolve) => {
  setTimeout(() => resolve("Data loaded!"), 2000);
});
myPromise.then(val => console.log(val));

• Observable (The "Data Stream"): Powered by RxJS, an Observable can emit zero, one, or multiple values over time. It is lazy (it doesn't do anything until you call .subscribe()) and it is cancellable. It also allows you to use powerful operators (map, filter, etc.) to manipulate the data in transit.

import { Observable } from 'rxjs';

const myObservable = new Observable((observer) => {
  observer.next("Chunk 1");
  setTimeout(() => observer.next("Chunk 2"), 2000);
});
const sub = myObservable.subscribe(val => console.log(val));
// Cancellable: sub.unsubscribe();

Comparison Table:

Feature	Promise	Observable (RxJS)
Values	Single value	Stream of multiple values
Execution	Eager (starts immediately)	Lazy (starts on subscribe())
Cancellable	No	Yes (via unsubscribe())
Operators	None (.then(), .catch())	Massive library (map, filter, retry, etc.)

4. How do you share data between components?

• Parent to Child: @Input() decorator or modern Signal Inputs (input()).
• Child to Parent: @Output() with EventEmitter or Model Signals.
• Unrelated Components: Shared Services using Observables/Signals, or State Management libraries (like NgRx).

---

🔴 Senior / Architect Level

Focuses on performance, reactivity, and architecture.

1. What problem do Signals solve compared to RxJS? Signals provide fine-grained, synchronous reactivity. While RxJS handles complex asynchronous event streams, it can sometimes cause intermediary state "glitches" and requires careful subscription management. Signals allow Angular to know exactly which specific piece of data changed, updating the DOM efficiently without having to check the entire component tree.

2. Explain Change Detection and the OnPush strategy.

By default, Angular uses a top-down approach, checking every component whenever an event occurs anywhere in the app. ChangeDetectionStrategy.OnPush optimizes this by telling Angular to only check a component if its @Input() reference changes, an event fires within that specific component, or an Observable/Signal linked to the template updates. This significantly boosts performance in large applications.

3. When would you use switchMap vs. mergeMap vs. concatMap?

• switchMap: Cancels any previous inner observable and only cares about the latest one. (Ideal for search autocomplete bars).
• mergeMap: Runs all inner observables in parallel. (Ideal for independent saves or logging).
• concatMap: Queues observables and runs them strictly in order. (Ideal for sequential database updates where order matters).

4. What are @defer blocks? A modern feature for Declarative Lazy Loading directly in the HTML template. It allows developers to specify that heavy components should only be downloaded and rendered when a specific condition is met (e.g., on viewport, on hover, or on idle), which drastically reduces the initial bundle size and speeds up load times.

---