Core Concepts Interview Questions

Angular is a TypeScript-based open-source framework for building web applications. Key differences from AngularJS include: component-based architecture instead of MVC, better performance with improved change detection, TypeScript usage, improved dependency injection, and modular development approach.

Decorators are design patterns that modify JavaScript classes. Common Angular decorators include: @Component (defines component), @Injectable (defines service), @NgModule (defines module), @Input/@Output (property binding), @HostListener (DOM event binding), and @ViewChild (child component reference).

NgModule is a decorator that defines a module in Angular. Essential properties include: declarations (components, directives, pipes), imports (other modules), exports (shared declarations), providers (services), and bootstrap (root component). It helps organize application into cohesive blocks of functionality.

Dependency Injection is a design pattern where dependencies are provided to classes instead of creating them. Angular's DI system uses @Injectable decorator, providers array, and hierarchical injector tree. It manages object creation, lifetime, and dependencies, promoting loose coupling and testability.

Lifecycle hooks are methods that Angular calls on components/directives at specific moments. Major hooks: ngOnInit (after first ngOnChanges), ngOnChanges (when data-bound property changes), ngOnDestroy (before destruction), ngDoCheck (during change detection), ngAfterViewInit (after view initialization).

Constructor is a TypeScript feature called when class is instantiated, used for dependency injection. ngOnInit is an Angular lifecycle hook called after data-bound properties are initialized. Best practice: use constructor for DI setup, ngOnInit for initialization logic.

Change detection is Angular's process of synchronizing component model and view. Uses Zone.js to track async operations. Two strategies: Default (checks entire tree) and OnPush (only checks on reference changes). Can be optimized using immutability and proper component architecture.

Data binding synchronizes component and view. Types: Interpolation {{data}}, Property binding [property], Event binding (event), Two-way binding [(ngModel)]. Enables automatic sync between model and view, reducing manual DOM manipulation.

ViewChild/ViewChildren decorators provide access to child elements in component template. ViewChild returns single element, ViewChildren returns QueryList. Used for accessing child components, directives, or DOM elements. Important for component interaction.

Services are singleton objects used for sharing data/functionality across components. Marked with @Injectable decorator. Used for: data sharing, business logic, external interactions (HTTP calls). Promotes DRY principle and separation of concerns.

providedIn configures service scope in @Injectable decorator (root, platform, any, specific module). providers array in @NgModule registers services at module level. providedIn enables tree-shaking, preferred for service registration in modern Angular.

Content projection (ng-content) allows passing content from parent to child component. Supports single-slot and multi-slot projection. Uses select attribute for targeted projection. Important for creating reusable, flexible components.

Templates define component's view in HTML with Angular-specific syntax. Features: data binding, directives, pipes, template expressions, template statements. Supports structural directives (*ngIf, *ngFor), event binding, and property binding.

Ahead-of-Time compilation compiles Angular application at build time. Benefits: faster rendering, smaller download size, earlier template error detection, better security. Default in production builds since Angular 9.

Angular DI uses hierarchical injector tree: NullInjector (root), Platform, Module, Element (component/directive). Child injectors inherit from parents. Enables service scope control, instance sharing, and override mechanisms.

Template reference variables (#var) create references to DOM elements, components, or directives in template. Used for direct access in template or component class via ViewChild. Useful for form handling and component interaction.

Zone.js provides execution context tracking for async operations. Angular uses it for automatic change detection by patching async operations. Enables detection of state changes from events, HTTP, timers. Critical for Angular's change detection system.

declarations list components/directives/pipes belonging to module. imports list other modules needed. providers list services for dependency injection. declarations must be unique across app, imports can be shared, providers affect dependency injection scope.

Angular elements are Angular components packaged as custom elements (Web Components). Use cases: embedding Angular components in non-Angular applications, micro-frontends, widget development. Enables framework-agnostic component reuse.

Methods include: @Input/@Output decorators, services (state management), ViewChild/ContentChild, event emitters, subject/behavior subject, parent-child interaction. Choose based on component relationship and data flow requirements.

Pure pipes execute only when input value reference changes. Impure pipes execute on every change detection cycle. Pure pipes better for performance, impure needed for dynamic transformations. Default is pure, impure marked with pure: false.

Angular CLI uses webpack for bundling. Lazy loading implemented through RouterModule with loadChildren syntax. Reduces initial bundle size, improves load time. Modules loaded on-demand when route accessed.

Async pipe automatically subscribes/unsubscribes to observables/promises in templates. Handles subscription lifecycle, prevents memory leaks. Useful for handling async data in templates without manual subscription management.

HostBinding decorates properties to bind to host element properties. HostListener decorates methods to handle host element events. Used in directives/components for DOM interaction without direct manipulation.

Error handling through: try-catch blocks, RxJS catchError operator, HTTP interceptors, ErrorHandler class, Router error handling. No direct equivalent to React error boundaries. Global error handling configured in module providers.

ViewEncapsulation controls component CSS encapsulation. Types: Emulated (default, scoped CSS), None (global CSS), ShadowDom (true shadow DOM). Affects how component styles are applied and scoped in application.

Schematics are templates for generating/modifying code. Used by Angular CLI for scaffolding components, services, etc. Can create custom schematics for project-specific generators. Supports workspace modifications.

Component styles defined in styles/styleUrls properties. Supports CSS encapsulation through ViewEncapsulation. Can use preprocessors (SCSS/SASS), CSS variables, global styles. Styles scoped to component by default.

NgZone service provides access to Angular's zone for executing work inside/outside Angular's zone. Used for performance optimization, manual change detection control. Important for integrating with third-party libraries.

Angular i18n uses XLF/XLIFF files for translations. Supports: text extraction, pluralization, date/number formatting, runtime language switching. Built-in i18n pipes, can use ngx-translate library for dynamic translations.