Angular

Question 1

forkJoin

concatMap

mergeMap

switchMap

Answer 1

forkJoin -> parallel + wait for all to finish.

concatMap → sequential (one after the other).

mergeMap → parallel, but emits results as they arrive.

switchMap → cancels previous when a new one starts.

Question 2

What is the difference between an attribute directive and a structural directive in Angular?

Answer 2

Attribute directives change the appearance or behavior of an existing element (e.g., changing style or adding classes). Structural directives change the DOM structure by adding or removing elements (e.g., *ngIf, *ngFor).

Question 3

How can you create a custom attribute directive in Angular?

Answer 3

You create a directive class with the @Directive decorator and use HostBinding/HostListener to manipulate styles or behaviors. Example: highlight a button when it has a custom attribute.

Question 4

What are the core parts of directives in Angular?

Answer 4

The core parts are: the directive selector, injected dependencies via constructor, and HostBinding/HostListener to interact with DOM elements. Structural directives also use TemplateRef and ViewContainerRef to manage DOM elements dynamically.

Question 5

Can you show usage of a custom structural directive in Angular?

Answer 5

Yes. Example: *appIf condition, which internally uses TemplateRef and ViewContainerRef to conditionally add or remove elements from the DOM, similar to *ngIf.

Question 6

What are Angular Modules (NgModules)?

Answer 6

NgModules organize an Angular app into cohesive blocks of functionality. They are defined using @NgModule, which includes metadata such as declarations (components, directives, pipes), imports (other modules), providers (services), and exports (what’s made available outside the module).

Question 7

What is the main purpose of Angular Modules?

Answer 7

To create reusable, encapsulated groups of code that structure large applications, manage dependencies clearly, and allow easy sharing of functionality across different parts of an app.

Question 8

What is a directive in Angular?

Answer 8

A directive is a class that can modify the structure or behavior of DOM elements. There are three main types: Components, Attribute Directives, and Structural Directives.

Question 9

What are the three types of directives in Angular?

Answer 9

1. Components (template + behavior), 2. Attribute Directives (modify appearance/behavior), 3. Structural Directives (alter DOM structure, e.g., *ngIf, *ngFor).

Question 10

What is the difference between attribute directives and structural directives?

Answer 10

Attribute directives change the appearance or behavior of elements (e.g., ngClass, ngStyle). Structural directives change the DOM layout by adding/removing elements (e.g., *ngIf, *ngFor).

Question 11

How would you implement a custom attribute directive?

Answer 11

You create a directive class decorated with @Directive, inject ElementRef/Renderer2, and apply styles/behavior. Example: highlight button when attribute is applied.

Question 12

How would you implement a custom structural directive?

Answer 12

You create a directive with @Directive, inject TemplateRef and ViewContainerRef, and use createEmbeddedView() or clear() to manipulate DOM structure.

Question 13

What are the core building blocks of a directive?

Answer 13

Decorator (@Directive), Selector (CSS-like pattern), and Class with injected dependencies like ElementRef, Renderer2, TemplateRef, or ViewContainerRef.

Question 14

Can you show usage of a custom structural directive?

Answer 14

Yes. Example: *appUnless works like *ngIf but in reverse. Usage: <div *appUnless=’condition’>Shown if condition is false</div>.

Question 15

What is ngOnInit used for?

Answer 15

It is a lifecycle hook called after Angular initializes component inputs. It’s used for fetching data, initialization logic, etc.

Question 16

What is ngOnDestroy used for?

Answer 16

It is a lifecycle hook used for cleanup, unsubscribing from observables, removing event listeners, and freeing resources.

Question 17

What is ngOnChanges used for?

Answer 17

It runs whenever input-bound properties change. Useful for reacting to @Input updates.

Question 18

What is an Angular Module?

Answer 18

A logical grouping of Angular classes, components, directives, services, and other modules. Defined with @NgModule decorator.

Question 19

What are the key metadata fields in @NgModule?

Answer 19

Declarations (components, directives, pipes), Imports (modules to use), Providers (services), and Exports (items made available to other modules).

Question 20

What is the purpose of declarations in an Angular module?

Answer 20

To declare components, directives, and pipes that belong to this module.

Question 21

What is the purpose of imports in an Angular module?

Answer 21

To import external modules so their exported classes can be used inside this module.

Question 22

What is the purpose of providers in an Angular module?

Answer 22

To define services that should be available via dependency injection throughout the module.

Question 23

What is the purpose of exports in an Angular module?

Answer 23

To make components, directives, or pipes from this module available for use in other modules.

Question 24

What is the main use case of Angular modules?

Answer 24

To create reusable, cohesive groups of code that can be shared across an application.

Question 25

How would you highlight a button using an attribute directive?

Answer 25

Create a custom directive with a selector like [appHighlight], inject ElementRef, and change element style. Usage: Click me.

Question 26

How does Angular differentiate between *ngIf and *ngFor?

Answer 26

Both are structural directives. *ngIf conditionally includes a template, *ngFor iterates over a collection and repeats a template.

Question 27

Can we create multiple structural directives on one element?

Answer 27

No, you cannot apply more than one structural directive on the same host element. Instead, wrap elements or use .

Question 28

What is the difference between constructor and ngOnInit in Angular?

Answer 28

Constructor is used to initialize services and other objects. ngOnInit is a lifecycle hook called after component inputs are initialized, suitable for performing logic that requires initialized inputs.

Question 29

What is the purpose of @Input() in Angular?

Answer 29

It allows a parent component to pass data into a child component.

Question 30

What is the purpose of @Output() in Angular?

Answer 30

It allows a child component to emit events to the parent component for communication.

Question 31

What is the difference between ngIf and ngSwitch?

Answer 31

ngIf handles conditional rendering for usually one or two conditions (if/else). ngSwitch handles multiple conditions and selects one template based on a switch value.

Question 32

What is change detection in Angular?

Answer 32

Change detection updates the view when data changes. Angular supports Default and OnPush strategies.

Question 33

What is the difference between Default and OnPush change detection strategies?

Answer 33

Default checks all components on any change. OnPush checks only when input references change or events inside the component occur.

Question 34

What is lazy loading in Angular?

Answer 34

Lazy loading delays the loading of a module until its route is accessed, reducing initial load time.

Question 35

How does Angular handle dependency injection?

Answer 35

Angular uses constructor injection to provide services. Services can be provided at root, module, or component level, controlling their lifetime and scope.

Question 36

What is the difference between providedIn root and providedIn child/module?

Answer 36

providedIn root creates a singleton available app-wide. Providing in a module or component scopes the service instance to that module/component.

Question 37

What is an Observable in Angular?

Answer 37

Observable is a data stream that can be subscribed to for asynchronous operations like HTTP calls.

Question 38

What is a Subject in RxJS?

Answer 38

Subject is a multicast Observable; multiple subscribers share the same data stream.

Question 39

What is a BehaviorSubject?

Answer 39

A BehaviorSubject is a Subject that stores the last emitted value and emits it immediately to new subscribers.

Question 40

What is a ReplaySubject?

Answer 40

A ReplaySubject stores the last n emitted values and replays them to new subscribers.

Question 41

What is an AsyncSubject?

Answer 41

AsyncSubject emits only the last value of the source Observable, and only after it completes.

Question 42

What is the difference between hot and cold observables?

Answer 42

Cold observables create a new stream for each subscription. Hot observables share a single stream across all subscribers.

Question 43

What does the map operator do in RxJS?

Answer 43

It transforms emitted values from an observable into new values.

Question 44

What does switchMap do?

Answer 44

switchMap maps each value to a new Observable and cancels the previous inner observable if a new value comes.

Question 45

What does mergeMap do?

Answer 45

mergeMap maps each value to an Observable and subscribes to all inner Observables in parallel.

Question 46

What does concatMap do?

Answer 46

concatMap maps each value to an Observable and subscribes sequentially, one after another.

Question 47

What does exhaustMap do?

Answer 47

exhaustMap ignores new values while the previous inner observable is still active.

Question 48

What is forkJoin?

Answer 48

forkJoin waits for all inner Observables to complete and emits their last values as an array.

Question 49

What is combineLatest?

Answer 49

combineLatest emits values whenever any inner Observable emits, but only after all Observables have emitted at least once.

Question 50

What is merge in RxJS?

Answer 50

merge emits values from multiple Observables as they occur, without waiting for completion.

Question 51

What is zip in RxJS?

Answer 51

zip combines multiple Observables and emits arrays of values, taking one value from each Observable sequentially.

Question 52

What does catchError do?

Answer 52

catchError handles errors in the observable stream and can return a new Observable.

Question 53

What does retryWhen do?

Answer 53

retryWhen retries a failed observable based on a notifier Observable, often for implementing backoff logic.

Question 54

What is the difference between reactive forms and template-driven forms?

Answer 54

Reactive forms are more declarative and defined in the component with FormControl/FormGroup. Template-driven forms are simpler and defined in HTML with ngModel.

Question 55

What is a pipe in Angular?

Answer 55

A pipe transforms data for display in templates. Custom pipes extend PipeTransform and are declared in a module.

Question 56

What is ViewChild used for?

Answer 56

ViewChild allows you to get a reference to a child component or DOM element in the component view.

Question 57

What is ContentChild used for?

Answer 57

ContentChild allows you to get a reference to projected content inside a component using .

Question 58

Which lifecycle hook is used to perform data fetching after a component is initialized?

Answer 58

ngOnInit

Question 59

What lifecycle hook runs when input-bound properties change?

Answer 59

ngOnChanges

Question 60

Which lifecycle hook runs on every change detection cycle?

Answer 60

ngDoCheck

Question 61

Which lifecycle hook runs after the component view and its child views are initialized?

Answer 61

ngAfterViewInit

Question 62

Which lifecycle hook is used for cleanup before the component is destroyed?

Answer 62

ngOnDestroy

Question 63

What is the difference between ngOnInit() and the constructor in an Angular component? When should you use each?

Answer 63

The constructor is used for simple class initialization like injecting dependencies. It runs before any Angular lifecycle hooks and should not contain logic dependent on bindings. The **ngOnInit()** lifecycle hook is called after the component’s inputs (@Input() bindings) have been set. This is the proper place to fetch data, set up subscriptions, or perform logic that depends on input values.

Question 64

What is the difference between @Input() and @Output() in Angular? When would you use each one?

Answer 64

@Input() allows a parent component to bind a value into a child component’s property. It’s used for data flow from parent to child. @Output() allows the child component to emit events to the parent using an EventEmitter. It supports event flow from child to parent, often for notifying the parent of user actions or internal state changes.

Question 65

What is the difference between ngIf and ngSwitch in Angular? When would you choose one over the other?

Answer 65

*ngIf is used when you want to conditionally include or exclude a block of HTML based on a boolean expression. It supports optional else templates using the else keyword. *ngSwitch is used when you have multiple possible values for a single expression and want to render different templates depending on which one matches. It uses ngSwitchCase and ngSwitchDefault to handle various branches, similar to a switch statement in JavaScript.