Question 1

What is Angular?

Accepted Answer

Angular is a TypeScript-based open-source framework developed by Google for building single-page applications. It provides a complete solution including components, dependency injection, routing, forms handling, and HTTP client. Angular uses a component-based architecture with two-way data binding.

Question 2

What is a Component?

Accepted Answer

A component is the fundamental building block of Angular applications. It consists of a TypeScript class with the @Component decorator, an HTML template, and optional CSS styles. Components control a portion of the screen called a view and can communicate with other components via inputs, outputs, and services.

Question 3

How Does Dependency Injection Work?

Accepted Answer

Dependency Injection (DI) is a design pattern where Angular provides dependencies to a class rather than the class creating them itself. Services are registered with providers, and Angular's injector creates and manages instances. DI makes code more modular, testable, and maintainable.

Question 4

What Are Directives Used For?

Accepted Answer

Directives are classes that add behavior to elements in Angular templates. There are three types: components (directives with templates), structural directives (*ngIf, *ngFor) that change DOM layout, and attribute directives (ngClass, ngStyle) that change element appearance or behavior.

Question 5

How does the change detection mechanism work?

Accepted Answer

Change detection is Angular's process of synchronizing the model with the view. When an event occurs, Angular checks the component tree from top to bottom, comparing current values with previous ones. If changes are detected, it updates the DOM. Zone.js triggers this process automatically after async operations.

Question 6

What change detection strategies do you know?

Accepted Answer

Angular has two strategies: Default and OnPush. Default checks the entire component tree on every change. OnPush only checks a component when its input references change, an event is emitted, or change detection is manually triggered. OnPush improves performance for immutable data patterns.

Question 7

What is a lifecycle hook?

Accepted Answer

Lifecycle hooks are methods that Angular calls at specific moments in a component's existence. Key hooks include ngOnInit (after first input binding), ngOnChanges (when inputs change), ngAfterViewInit (after view initialization), and ngOnDestroy (before component destruction for cleanup).

Question 8

What Is the Difference Between ngOnInit and the Constructor?

Accepted Answer

The constructor is a TypeScript feature called when the class is instantiated - use it only for dependency injection. ngOnInit is an Angular lifecycle hook called after inputs are set - use it for initialization logic, API calls, and setting up subscriptions.

Question 9

What Is the Difference Between an Observable and a Promise?

Accepted Answer

Promises handle a single async value and are eager (execute immediately). Observables handle multiple values over time, are lazy (execute on subscription), and are cancellable via unsubscribe(). Observables also support operators for transformation, filtering, and combining streams.

Question 10

What Is Data Binding?

Accepted Answer

Data binding connects component data to the template. Angular supports four types: interpolation {{value}} for displaying data, property binding [property]='value' for setting element properties, event binding (event)='handler()' for responding to events, and two-way binding [(ngModel)] combining both.

Question 11

How Can Two Components Communicate?

Accepted Answer

Components communicate via: @Input() to pass data from parent to child, @Output() with EventEmitter to send events from child to parent, shared services with observables for unrelated components, and ViewChild/ContentChild for direct access to child components.

Question 12

What Is the Purpose of a Pipe?

Accepted Answer

Pipes transform data in templates without modifying the source data. Built-in pipes include date, currency, uppercase, and async. Custom pipes are created with @Pipe decorator. Pipes can be pure (only recalculate when input reference changes) or impure (recalculate on every change detection).

Question 13

How to Implement Lazy Loading?

Accepted Answer

Lazy loading loads feature modules on demand rather than at startup. Configure it in the router using loadChildren with dynamic import: { path: 'feature', loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule) }. This reduces initial bundle size and improves load time.

Question 14

What is the purpose of TestBed?

Accepted Answer

TestBed is Angular's primary testing utility that creates a testing module environment. It configures and initializes components for testing, allows mocking dependencies, provides access to the component instance and DOM, and enables testing of component interactions and template bindings.

Question 15

What is the Purpose of an HTTP Interceptor?

Accepted Answer

HTTP Interceptors are middleware that intercept outgoing requests and incoming responses. Common uses include adding authentication headers to all requests, handling errors globally, logging, caching responses, and showing loading indicators. Implement HttpInterceptor interface and provide it in the module.

Angular Basics(5 questions)

What is Angular?

What are the features of Angular?

How does Angular differ from AngularJS?

What are the building blocks of Angular?

How do the various Angular components interact?

Components(2 questions)

What is a Component?

How Can Two Components Communicate?

Directives(6 questions)

What Are Directives Used For?

What is the Difference Between a Directive and a Component?

What Types of Directives Do You Know?

Why Do We Use an Asterisk (*) Prefix Before the Directive Name?

What Are TemplateRef and ViewContainerRef Used For?

How Can You Apply *ngFor and *ngIf Simultaneously?

Pipes(3 questions)

What Is the Purpose of a Pipe?

What Is the Purpose of an AsyncPipe?

What Is the Difference Between a Pure Pipe and an Impure Pipe?

Change Detection(4 questions)

How does the change detection mechanism work?

What triggers change detection?

What change detection strategies do you know?

What does the error "Expression has changed after it was checked" mean?

Component Lifecycle(3 questions)

What is a lifecycle hook?

In What Order Are Lifecycle Hooks Triggered?

What Is the Difference Between ngOnInit and the Constructor?

Dependency Injection(5 questions)

How Does Dependency Injection Work?

What Is the Purpose of a Provider?

How Can You Ensure That a @Service Is a Singleton?

What Are Decorators Used For?

What Is Data Binding?

Reactive Programming(5 questions)

What Is Reactive Programming?

What Is the Difference Between an Observable and a Promise?

What Is the Difference Between a Hot and a Cold Observable?

What Differentiates switchMap from concatMap and mergeMap?

When Should (and When Should Not) You Manually Call unsubscribe()?

Testing(1 questions)

What is the purpose of TestBed?

Forms(2 questions)

What distinguishes Template-driven Forms from Reactive Forms?

What is the purpose of ControlValueAccessor?

Performance Optimization(2 questions)

How to Optimize an Angular Application?

How to Implement Lazy Loading?

Security(3 questions)

How to Secure an Application from Attacks?

How to Block Page Access for Non-Logged-In Users?

What is the Purpose of an HTTP Interceptor?

Advanced Angular(9 questions)

What Does Angular Compilation Entail?

How Does AOT Compilation Work?

How to Enable Server-Side Rendering?

What is View Encapsulation?

What is Shadow DOM?

What is zone.js?

How to Update the Data Model Without Triggering Change Detection?

What is the Role of a Service Worker in Angular?

What is Ivy?

Why Do We Use an Asterisk (`*`) Prefix Before the Directive Name?

What Are `TemplateRef` and `ViewContainerRef` Used For?

How Can You Apply `ngFor` and `ngIf` Simultaneously?

What Is the Purpose of a `Pipe`?

What Is the Purpose of an `AsyncPipe`?

What Is the Difference Between `ngOnInit` and the Constructor?

How Can You Ensure That a `@Service` Is a Singleton?

What Is the Difference Between an `Observable` and a `Promise`?

What Differentiates `switchMap` from `concatMap` and `mergeMap`?

When Should (and When Should Not) You Manually Call `unsubscribe()`?

What is the purpose of `TestBed`?

What is the purpose of `ControlValueAccessor`?