Components

Angular components combine a class, template, and styles. Standalone components import dependencies directly without NgModule ceremony. `@Input` / `@Output` define parent contracts; content projection (`ng-content`) composes layout shells.

Change detection: default checks all bindings; `ChangeDetectionStrategy.OnPush` checks when inputs change or events fire from the component — critical for performance interviews.

					@Component({
  selector: 'app-user',
  standalone: true,
  template: `<p>{{ user().name }}</p>`,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class UserComponent {
  user = input.required<User>();
}
				

On interviews: lifecycle hooks order, signal inputs (modern), and when to split smart versus presentational components.

Common pitfalls: mutating @Input objects, heavy work in constructors, and default change detection on large trees.

The trade-off is OnPush performance gains versus stricter input immutability and event-driven updates.

Checklist:

• OnPush for list-heavy UIs.
• Inputs/outputs as explicit API.
• Project content for flexible shells.
• Keep templates thin; logic in class or service.