Question 1

What is an Angular component and what are its core pieces?

Accepted Answer

A component is a class with a template and styles that owns a piece of UI, declared with @Component. Angular components encapsulate view + logic. The decorator sets selector, template/templateUrl, styleUrls, and changeDetection. The class holds state and methods; the template binds to them. Standalone components import their own dependencies instead of needing NgModules.

Question 2

What is the difference between a standalone component and an NgModule-declared component?

Accepted Answer

Standalone components declare imports in @Component; classic components are declared in an NgModule. Standalone (default in modern Angular) makes components self-contained and simplifies lazy loading. NgModules still exist for legacy apps and some libraries. Prefer standalone for new work; migrate gradually with standalone: true.

Question 3

Explain @Input and @Output on Angular components.

Accepted Answer

@Input receives data from the parent; @Output emits events via EventEmitter (or output() function). Inputs are one-way down; outputs notify parents of events. Prefer the signal-based input()/output() APIs in modern Angular. Avoid two-way binding unless needed; use model() for two-way signal inputs.

Question 4

What is content projection and when do you use ng-content?

Accepted Answer

Content projection slots parent-provided markup into a child template via ng-content. Use select to project into multiple slots. Prefer projection for reusable shells (cards, layouts) instead of hardcoding children. Distinguish projected content from the component's own view for styling and queries.

Question 5

How do ViewChild and ContentChild differ?

Accepted Answer

ViewChild queries the component's own template; ContentChild queries projected content. Timing matters: queries are available after ngAfterViewInit / ngAfterContentInit. Prefer signal queries (viewChild, contentChild) in modern Angular. Avoid querying too early in the constructor.

Question 6

What lifecycle hooks matter most for Angular components?

Accepted Answer

ngOnInit for setup, ngOnDestroy for cleanup; view/content hooks when querying DOM/projected nodes. Constructor is for DI only. Use effects/signals for reactive updates instead of heavy ngOnChanges when possible. Always unsubscribe or destroy resources in ngOnDestroy (or takeUntilDestroyed).

Question 7

When should you split a large component into smaller ones?

Accepted Answer

When the template/logic mixes unrelated concerns, re-renders are expensive, or reuse/testing suffers. Extract presentational components, move state to services or parent containers, and keep templates readable. Prefer composition over inheritance for UI.

Question 8

How do you share state between sibling Angular components?

Accepted Answer

Lift state to a common parent, use a shared injectable service, or a signal store. Avoid prop drilling through deep trees. Services with providedIn or route-level providers scope lifetime. Signals/RxJS subjects expose reactive state.

Components Angular Interview Questions

Other Angular interview topics