DEV Community: Dhivya Delphina

Angular Scenario Based Questions

Dhivya Delphina — Wed, 23 Apr 2025 09:34:26 +0000

🔹 1. Component Communication

Q: You have a dashboard component that shows a list of users. A sidebar filter component updates the user list based on the role selected. How would you implement communication between these two components?

Hint: Use a shared service with BehaviorSubject or signal() (Angular 16+), or use @Input() / @Output() for direct communication if nested.

🔹 2. Lazy Loading and Route Guards

Q: Your app has a Reports module that should only load for admin users. How do you restrict access and ensure it is lazily loaded?

Answer:

Implement canLoad and canActivate guards
Use Angular Router’s lazy loading in app-routing.module.ts

{ 
  path: 'reports', 
  loadChildren: () => import('./reports/reports.module').then(m => m.ReportsModule),
  canLoad: [AdminGuard],
  canActivate: [AdminGuard]
}

🔹 3. Reactive Forms + Validation

Q: You need a form to submit user details with real-time validation for email and username availability. How would you handle this?

Approach:

Use ReactiveFormsModule
AsyncValidator for checking availability via HTTP
Combine it with standard Validators.email, Validators.required

🔹 4. Handling Multiple HTTP Requests

Q: You want to load user profile and user preferences on component init. How would you handle multiple dependent HTTP calls?

Answer:
Use forkJoin() if both are independent:

forkJoin({
  profile: this.api.getProfile(),
  preferences: this.api.getPreferences()
}).subscribe(({ profile, preferences }) => {
  // Use both
});

Or use switchMap() if one depends on another.

🔹 5. State Management Without NgRx

Q: Your Angular 17 app needs to manage shared user state across multiple components, without adding NgRx. What’s the best alternative?

Options:

Use Angular Signals (signal(), computed()) in a shared service
Or use BehaviorSubject with a service + async pipe in components

🔹 6. Performance Optimization

Q: Your page has large forms and dropdowns making it sluggish. What are some techniques to optimize performance?

Answer:

Use trackBy in *ngFor
Lazy load dropdown data
Use ChangeDetectionStrategy.OnPush
Use ngOptimizedImage for images (Angular 15+)

🔹 7. Error Handling in HTTP Calls

Q: How would you globally handle errors from HTTP requests and show a toast or snackbar?

Approach:

Use HTTP Interceptor to catch errors
Inject a Snackbar/Toast service (like Angular Material’s MatSnackBar)
Log errors and display a user-friendly message

🔹 8. Unit Testing a Component

Q: A component uses a service to fetch data in ngOnInit(). How do you test that the data is loaded correctly?

Steps:

Mock the service using useValue in TestBed
Spy on the service method
Trigger fixture.detectChanges() and check the component’s state/UI

🔹 9. Dynamic Form Generation

Q: Your app needs to dynamically generate forms based on JSON schema. What would your approach be?

Answer:

Use FormGroup, FormControl in a recursive function
Optionally integrate with Angular Formly for dynamic rendering

🔹 10. Standalone Components

Q: Your project uses standalone components. How do you share commonly used modules (like FormsModule or Material components) across multiple components?

Approach:

Create a shared module that exports standalone imports
Use the imports: [] array in each standalone component

🔹 11. Designing a Scalable Architecture for a Large Angular App

Scenario:

You’re leading a team building a multi-role enterprise dashboard (Admin, Manager, User). New modules are being added every quarter.

Question:

How would you design the folder structure and module hierarchy to keep the project scalable?

Expected Approach:

Feature-based module structure (/features/admin, /features/manager, /shared, /core)
Use Lazy Loading for each role-based module
SharedModule for reusable UI components
CoreModule for singleton services, interceptors
Implement role-based route guards
Use standalone components for micro-features

🔹 12. Onboarding Junior Developers Quickly

Scenario:

You’re onboarding 2 junior devs. They need to contribute without breaking core functionality.

Question:

What would you set up in the Angular project to help them?

Best Practices:

Add architecture diagrams and README with module purpose
Use Storybook or component sandboxing for isolated testing
Create a centralized design system using Angular Material or Tailwind
Write reusable, self-contained components
Enforce strict TypeScript settings
Linting + Prettier setup + Husky pre-commit hooks

🔹 13. Integrating a Third-Party Widget into Angular

Scenario:

You need to embed a third-party widget (e.g., a chat bot) that requires script injection and global config access.

Question:

How would you do this in Angular without breaking SSR or encapsulation?

Answer:

Create a directive or service to dynamically inject <script> with Renderer2
Use Angular's APP_INITIALIZER to load configuration
Avoid direct DOM access — prefer RendererFactory2
If using SSR, use isPlatformBrowser() check

🔹 14. Signal vs BehaviorSubject in Shared State

Scenario:

Your team wants to migrate shared user state to Angular 17+ Signals. What should be considered?

Answer:

Use signal() in service to hold the current user
Use computed() for derived state (e.g., isAdmin)
Prefer signals when:
- Localized state in a component/service
- You don’t need multicasting or async support
Use BehaviorSubject when:
- The value comes from an async HTTP call
- External subscribers (like NgRx effects or guards) need access

🔹 15. Performance Drops on Large Tables

Scenario:

Team reports performance issues when rendering 500+ rows with filtering and sorting in a Material Table.

Question:

What steps do you take to diagnose and optimize?

Solution:

Use trackBy in *ngFor
Use ChangeDetectionStrategy.OnPush
Implement virtual scrolling via cdk-virtual-scroll-viewport
Debounce filtering operations
Offload heavy computations to Web Workers (if needed)

🔹 16. Upgrade from Angular 14 to 17

Scenario:

You’re planning a major Angular version upgrade.

Question:

How do you ensure it’s smooth and the team is productive?

Checklist:

Read Angular changelogs and migration guides
Use ng update CLI tool with --force if needed
Upgrade TypeScript and RxJS versions accordingly
Test feature modules in isolation
Create a separate upgrade branch
Schedule smoke testing and QA regression
Update peer dependencies and CI scripts

🔹 17. Authentication Across Micro Frontends

Scenario:

You’re leading a project with two Angular micro frontends, sharing a login system.

Question:

How would you implement shared authentication?

Approach:

Use OAuth tokens stored in HttpOnly cookies or secured localStorage
Share a common AuthService via a library (NX monorepo or npm package)
Use APP_INITIALIZER in each app to verify login state
Broadcast login/logout events across apps with BroadcastChannel API or shared event bus

🔹 18. CI/CD Integration and Previews

Scenario:

Your team wants to preview feature branches before merging.

Question:

How would you support this in Angular?

Solution:

Use tools like Vercel, Netlify, or GitHub Pages with preview deploys
Each PR builds and deploys a preview environment
Add Cypress tests for sanity checks in CI
Use environment.ts with dynamic configs for staging

🔹 19. Code Review Guidelines for Angular Projects

Scenario:

Your team has inconsistent PRs. You want to improve code quality across Angular codebase.

Action Plan:

Define a shared PR checklist (naming, tests, comments)
Set up ESLint with Angular-specific rules
Use Prettier + Husky pre-commit hooks
Enforce best practices:
- OnPush default
- async pipe preferred over manual subscribe()
- No logic in templates
Encourage signals and standalone components

🔹 20. Team Debugging and Error Monitoring

Scenario:

Your Angular app in production shows errors, but logs are vague. What’s your approach?

Answer:

Integrate error tracking (e.g., Sentry, LogRocket, or Firebase Crashlytics)
Use a global error handler (ErrorHandler)
Customize HttpInterceptor for consistent error structure
Add breadcrumb logs to track user interactions before error
Set up Slack/Email alerts for specific error types

Reactivity in Angular

Dhivya Delphina — Wed, 23 Apr 2025 09:27:52 +0000

✅ What Does Reactive Mean?

At its core, reactive programming is about writing code that automatically reacts to changes in data or events.

Instead of manually checking for changes or polling data, reactive code updates itself when something it depends on changes.

🧠 Think of It Like This:

You define data sources (signals, observables).
You define reactions (functions that run when data changes).
The framework handles the connection between the two.

🆚 Imperative vs Reactive

Imperative Code	Reactive Code
Manually manage state updates	Automatically reacts to state changes
Explicit logic flow	Declarative data flow
More prone to bugs in UI state	Cleaner, more maintainable

✅ Example in Angular

🟦 Imperative Approach:

this.counter = 0;

increment() {
  this.counter++;
  this.updateUI();
}

You manually change the value and then trigger UI updates.

🟩 Reactive with Signal:

counter = signal(0);

// Computed value that reacts to counter changes
double = computed(() => this.counter() * 2);

// This runs automatically when counter or double changes
effect(() => {
  console.log('Double is now:', this.double());
});

// When counter is updated, everything reacts
this.counter.set(this.counter() + 1);

No manual update or tracking — everything is reactive and automatic.

✅ In Angular Context:

Reactive Features:

RxJS Observables: Data streams that react to events or HTTP changes
Reactive Forms: Automatically track form state and validation
Signals: New Angular reactive primitives for zone-less state tracking
Change Detection: Reacts to value changes to update the DOM

🎯 Benefits of Reactive Code

✅ Less boilerplate
✅ Better performance (especially with OnPush or Signals)
✅ Easier to manage complex UI state
✅ Makes async operations cleaner (e.g., HTTP requests, timers)

Let's explore reactivity in Angular through three practical and side-by-side examples using:

RxJS Observables
Signals (Angular 16+)
Reactive Forms

Each showcases how Angular handles state reactively — meaning the UI responds automatically to data changes without manual DOM updates.

✅ 1. RxJS Observables (Reactive via Streams)

Use Case: React to timer or HTTP data

@Component({
  selector: 'app-rxjs-demo',
  template: `<p>Time: {{ time }}</p>`
})
export class RxjsDemoComponent implements OnInit {
  time: number = 0;

  ngOnInit() {
    interval(1000).subscribe(value => {
      this.time = value; // UI updates automatically
    });
  }
}

interval emits values every second.
The subscription reacts to the emission, and Angular reflects it in the DOM.

✅ 2. Signals (Angular 16+): Fine-Grained Reactivity

Use Case: Modern, reactive state without zones

import { signal, computed, effect } from '@angular/core';

@Component({
  selector: 'app-signal-demo',
  standalone: true,
  template: `
    <p>Count: {{ count() }}</p>
    <p>Double: {{ double() }}</p>
    <button (click)="increment()">Increment</button>
  `
})
export class SignalDemoComponent {
  count = signal(0);
  double = computed(() => this.count() * 2);

  constructor() {
    effect(() => {
      console.log('Double changed to', this.double());
    });
  }

  increment() {
    this.count.set(this.count() + 1);
  }
}

Reactive signals track dependencies and automatically update.
effect() reacts to any change without manually subscribing.
Cleaner, faster, and no zone.js needed.

✅ 3. Reactive Forms: Reactive Form Validation and Updates

Use Case: Live form validation and value tracking

@Component({
  selector: 'app-form-demo',
  template: `
    <form [formGroup]="form">
      <input formControlName="name" placeholder="Enter name" />
    </form>
    <p>Name Length: {{ nameLength }}</p>
  `
})
export class FormDemoComponent implements OnInit {
  form: FormGroup;
  nameLength: number = 0;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      name: ['']
    });
  }

  ngOnInit() {
    this.form.get('name')!.valueChanges.subscribe(value => {
      this.nameLength = value.length;
    });
  }
}

The form control emits changes reactively.
We subscribe to those changes and update the UI live.

🧠 Summary Table

Feature	RxJS Observable	Signal	Reactive Forms
Introduced In	Angular 2+	Angular 16+	Angular 2+
Async Stream	Yes	No (sync, state-based)	No
Use Case	HTTP, events	Local state mgmt	Forms
Subscriptions	Manual (`subscribe`)	Automatic via `effect`	Manual (`valueChanges`)
Zone.js needed?	Yes (by default)	No	Yes

Now, Let’s now build a real-time mini-app using Signals with a Signal Store, showcasing parent-child communication without @Output, using a shared reactive state.

✅ Scenario: Live User Profile Editor with Signals

💡 Signal Store holds the shared state (username).
📦 Parent Component displays user info.
✏️ Child Component allows editing the username.
🔄 No EventEmitter, no manual change detection — just pure reactivity.

🏗️ Step-by-Step Setup

1️⃣ Create a Shared Signal Store Service

import { Injectable, signal } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class UserStore {
  username = signal('Alice');

  updateUsername(newName: string) {
    this.username.set(newName);
  }
}

username is a signal: a reactive state container.
Any component that reads this will automatically react to changes.

2️⃣ Parent Component: `UserProfileComponent`

import { Component, computed, inject } from '@angular/core';
import { UserStore } from './user.store';
import { UserEditorComponent } from './user-editor.component';

@Component({
  selector: 'app-user-profile',
  standalone: true,
  imports: [UserEditorComponent],
  template: `
    <h2>User Profile</h2>
    <p>Welcome, {{ username() }}!</p>
    <app-user-editor />
  `
})
export class UserProfileComponent {
  private store = inject(UserStore);
  username = computed(() => this.store.username());
}

Uses computed() for reactive consumption of the username signal.
Re-renders automatically when the signal updates — no subscriptions needed.

3️⃣ Child Component: `UserEditorComponent`

import { Component, inject } from '@angular/core';
import { UserStore } from './user.store';

@Component({
  selector: 'app-user-editor',
  standalone: true,
  template: `
    <input 
      [value]="store.username()" 
      (input)="store.updateUsername($any($event.target).value)" 
      placeholder="Edit name" 
    />
  `
})
export class UserEditorComponent {
  store = inject(UserStore);
}

Reads the signal directly from the store.
Updates it with updateUsername, which automatically triggers updates in all other components using the same signal.

✅ Live Flow Example:

User visits dashboard: sees "Welcome, Alice".
Edits name in child component input to "Bob".
Signal store updates → parent auto-reacts → shows "Welcome, Bob".

🎁 Bonus: Add a Derived Value with `computed()`

In the parent, add:

usernameUpper = computed(() => this.store.username().toUpperCase());

Template:

<p>Username in caps: {{ usernameUpper() }}</p>

✔️ This will always be up-to-date without manual updates or watchers.

🔄 Summary

Element	Role	Reactivity
`signal()`	Holds mutable state	✅
`computed()`	Derived, auto-updating	✅
`effect()`	Side-effects on change	✅
Shared Service	App-level state sharing	✅

In Angular, both constructor and inject() can be used to get dependencies, but they serve different purposes and are used in different contexts.

Let’s break it down:

🔍 1. Constructor-based Dependency Injection

✅ Traditional and most common method.

@Component({ ... })
export class MyComponent {
  constructor(private userService: UserService) {}

  ngOnInit() {
    this.userService.loadUser();
  }
}

🔧 How it works:

Angular uses constructor injection to create instances.
Dependencies are injected when the class is instantiated.
Works in all Angular classes: components, services, pipes, etc.

✅ Benefits:

Easy to read, widely used, works everywhere.
Keeps dependencies explicit.

❌ Limitations:

Cannot be used outside class context (e.g., inside functions or computed/effect outside class methods).

🔥 2. inject() Function (from Angular v14+)

import { inject } from '@angular/core';

@Component({ ... })
export class MyComponent {
  userService = inject(UserService);

  ngOnInit() {
    this.userService.loadUser();
  }
}

🔧 How it works:

inject() can be used at the top level of a class.
You don’t need to use the constructor to inject a service.
It’s a function — not part of the DI constructor mechanism.

✅ Benefits:

Works even outside class constructors, such as:
- Signals
- computed() or effect() scopes
- Standalone functions or utilities

❌ Limitations:

Can only be used within Angular-managed code (like components, services, etc.).
Harder to mock in unit tests without DI frameworks or tools like TestBed.overrideProvider.

✅ When to Use Which?

Use Case	Use `constructor`?	Use `inject()`?
Regular services in components	✅ Yes	✅ Yes
Inject inside `computed()`/`effect()`	❌ No	✅ Yes
Want concise class with less boilerplate	❌ Optional	✅ Clean syntax
Want to test easily	✅ Yes	❌ Harder to override
Angular Standalone APIs	✅/❌	✅ Especially for Signals

✅ Real World Mixed Example

export class MyComponent {
  private logger = inject(LoggerService);  // used in a signal or effect
  username = signal('');

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.logger.log('Component loaded');
    this.userService.loadUser();
  }
}

🧠 TL;DR

Feature	`constructor`	`inject()`
Introduced	Angular 2	Angular 14+
Type	OOP-style (class-based)	Functional-style
Readability	✅ Very clear	✅ Clean but less explicit
Flexibility	❌ Constructor only	✅ Use anywhere (signals, etc)
Testability	✅ Easy to mock	❌ Needs override setup

Angular Concepts Overview

Dhivya Delphina — Wed, 23 Apr 2025 09:20:05 +0000

✅ 1. What is Angular, and why does Angular use TypeScript?

🔹 Angular:

Angular is a TypeScript-based open-source front-end framework developed by Google for building dynamic web applications. It follows component-based architecture and comes with a powerful set of features like:

Two-way data binding
Dependency Injection
RxJS support
Routing
Form validation
Modular development

🔹 Why TypeScript?

TypeScript is a superset of JavaScript that adds static typing and OOP features like classes, interfaces, and access modifiers.

🧠 Key Reasons Angular uses TypeScript:

Type Safety: Helps catch errors during development.
Tooling Support: Better autocompletion and refactoring with IDEs.
OOP Support: Facilitates modular architecture with interfaces and decorators.
Advanced Features: Decorators (@Component, @Injectable) are native to TypeScript.

✅ Real-world analogy:

Using TypeScript in Angular is like driving a car with ABS and sensors — it keeps you safe by warning about issues before they become real problems in production.

✅ 2. What is Angular Material?

Angular Material is a UI component library developed by Angular team following the Material Design principles by Google.

🔹 Features:

Pre-built UI components (buttons, dialogs, date pickers, tabs)
Responsive layout using Flex Layout
Accessible and mobile-friendly
Customizable themes

🔹 Example:

ng add @angular/material

<mat-toolbar color="primary">My App</mat-toolbar>
<mat-card>
  <mat-card-title>Welcome</mat-card-title>
</mat-card>

✅ Scenario:

Use Angular Material when you want to build a consistent UI quickly without reinventing the wheel. Ideal for dashboards, admin panels, or enterprise apps.

✅ 3. What is a directive, and what are the types of directives?

🔹 A directive in Angular is a class with a `@Directive` decorator that lets you manipulate the DOM or component behavior.

🔸 Types of Directives:

Component Directive – Technically a directive with a template.
- e.g., @Component
Structural Directive – Changes the DOM structure
- e.g., *ngIf, *ngFor, *ngSwitch
Attribute Directive – Alters the appearance or behavior of an element.
- e.g., ngClass, ngStyle, or custom ones

🔹 Example: Custom Attribute Directive

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }
}

<p appHighlight>This text is highlighted.</p>

✅ 4. What are the building blocks of Angular?

Modules (NgModules) – Group related features
Components – UI + logic (template + TS class)
Templates – HTML with Angular syntax
Directives – Modify DOM or behavior
Services – Business logic, data access, reusable code
Routing – Navigation and views
Pipes – Transform data in templates
Dependency Injection (DI) – Service injection

✅ 5. What is Dependency Injection (DI)?

DI is a design pattern where dependencies (services, config, etc.) are injected into components instead of hard-coding them.

🔹 Benefits:

Loose coupling
Easier testing
Better reusability

🔹 Example:

@Injectable({ providedIn: 'root' })
export class LoggerService {
  log(msg: string) {
    console.log(msg);
  }
}

@Component({ ... })
export class HomeComponent {
  constructor(private logger: LoggerService) {
    this.logger.log('Home loaded');
  }
}

✅ Real-world analogy:

It’s like ordering a pizza instead of baking one yourself — let someone else handle it and just enjoy the result.

✅ 6. What is Data Binding, and how many ways can it be implemented?

Data binding connects component logic with the UI.

🔹 1. Interpolation (`{{ }}`)

Displays dynamic data.

<p>Hello, {{ name }}</p>

🔹 2. Property Binding (`[property]`)

Binds component data to HTML property.

<img [src]="imgUrl">

🔹 3. Event Binding (`(event)`)

Handles user events like clicks.

<button (click)="onClick()">Click Me</button>

🔹 4. Two-way Binding (`[(ngModel)]`)

Syncs data both ways.

<input [(ngModel)]="username">

✅ 7. What are filters in Angular?

In Angular, Pipes are the equivalent of filters (from AngularJS).

🔹 Built-in Pipes:

date, uppercase, lowercase, currency, percent, etc.

🔹 Custom Pipe Example:

@Pipe({ name: 'reverse' })
export class ReversePipe implements PipeTransform {
  transform(value: string): string {
    return value.split('').reverse().join('');
  }
}

Usage:

{{ 'hello' | reverse }} <!-- Output: olleh -->

✅ 8. What is ViewEncapsulation?

Controls how CSS styles are scoped to a component.

🔸 Types:

Emulated (default): Styles scoped via unique attributes
None: Styles are global
ShadowDom: Uses native Shadow DOM

✅ Example:

@Component({
  ...
  encapsulation: ViewEncapsulation.Emulated // or None / ShadowDom
})

✅ 9. Why prioritize TypeScript over JavaScript in Angular?

🔹 Reasons:

Static typing → Fewer runtime errors
Decorators → Metadata and Dependency Injection
Better tooling → IntelliSense, refactoring
Interfaces, enums, access modifiers
Ahead-of-time (AOT) compatibility

Angular is written in TypeScript, making it a natural fit.

✅ 10. What do you understand by RouterOutlet and RouterLink?

🔸 `RouterOutlet`

A directive that marks where the routed component should be displayed.

<router-outlet></router-outlet>

🔸 `RouterLink`

Binds to route paths in your templates.

<a routerLink="/home">Go to Home</a>

✅ 11. What happens when you use the `<script>` tag within a template?

Using <script> tags inside Angular templates is strongly discouraged and generally not supported.

🔥 Why it's a problem:

Security Risk: Angular sanitizes templates to prevent XSS attacks.
Ignored Content: Angular will ignore or strip out <script> tags in the DOM.
Best Practice Violation: Script logic should go in the component .ts file, not in the template.

🧠 Instead of this:

<!-- ❌ Not recommended -->
<script>alert('Hi')</script>

✅ Do this:

ngOnInit() {
  alert('Hi');
}

✅ 12. What is `ViewChild`, and when would you use `{ static: false }`?

🔹 `@ViewChild`

It allows access to a DOM element, directive, or component inside your template from your component class.

Syntax:

@ViewChild('myElement', { static: false }) myEl: ElementRef;

🔹 `static: false`

Use when the element is inside an *ngIf, *ngFor, or any structural directive and you want to access it after the view initializes (ngAfterViewInit).

🔹 `static: true`

Use when the element is always present and you want to access it in ngOnInit.

✅ Example:

<div *ngIf="show" #myDiv>Hello</div>

@ViewChild('myDiv', { static: false }) myDiv: ElementRef;

✅ 13. How many ways can we share data between components?

🔸 1. @Input() / @Output()

Parent → Child: @Input()
Child → Parent: @Output() with EventEmitter

🔸 2. Shared Service with BehaviorSubject or Subject

Best for unrelated components (e.g., sibling to sibling).

🔸 3. Router State / Route Params

Pass data during routing.

🔸 4. ngRx / State Management

Advanced: used in large-scale apps.

✅ Example:

// service.ts
data$ = new BehaviorSubject<string>('initial');

// component A
this.service.data$.next('new value');

// component B
this.service.data$.subscribe(value => this.received = value);

✅ 14. Angular Lifecycle Hooks

These are methods that allow you to tap into different phases of a component's lifecycle.

Hook	When it’s called
`ngOnChanges()`	When an input-bound property changes
`ngOnInit()`	After component initialization
`ngDoCheck()`	Custom change detection
`ngAfterContentInit()`	After `<ng-content>` is projected
`ngAfterContentChecked()`	After content is checked
`ngAfterViewInit()`	After component’s view is initialized
`ngAfterViewChecked()`	After the view and child views are checked
`ngOnDestroy()`	Just before component is destroyed

✅ Example:

ngOnInit() {
  console.log("Component initialized");
}

✅ 15. What is AOT compilation? What are the advantages of AOT?

🔹 AOT (Ahead-of-Time Compilation)

Angular compiles HTML and TypeScript into JavaScript at build time, rather than in the browser.

🔸 Advantages:

Faster Rendering: Templates are pre-compiled.
Smaller Bundle Size
Early Error Detection
Security: Template injection attacks are minimized.

✅ Usage:

AOT is enabled by default in production:

ng build --prod

✅ 16. What is `"sourceMap": true` in Angular?

In angular.json, this config generates source maps that map minified code back to the original TypeScript code.

✅ Why it’s useful:

Enables debugging in the browser (e.g., Chrome DevTools)
Maps back errors to actual .ts files instead of .js

✅ 17. What is RxJS?

RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using Observables.

🔹 Core Concepts:

Observable: Represents a stream of data.
Observer: Consumes the data.
Operators: Transform data (e.g., map, filter, mergeMap)

✅ Example:

interval(1000).pipe(
  map(x => x * 2)
).subscribe(console.log);

✅ 18. Promise vs Observable

Feature	Promise	Observable
Eager vs Lazy	Eager	Lazy
Values	One	Multiple
Cancelable	❌	✅
Operators	❌	✅
Async Operations	✅	✅

✅ Example:

// Promise
fetchData().then(res => ...);

// Observable
this.service.getData().subscribe(res => ...);

✅ 19. What are Template and Reactive Forms?

🔹 Template-driven Forms

Use ngModel
Simpler, best for basic forms
Defined in HTML

🔹 Reactive Forms

Use FormGroup, FormControl, FormBuilder
More robust and testable
Defined in TypeScript

✅ Example:

this.form = new FormGroup({
  name: new FormControl('')
});

✅ 20. What are `forRoot()` and `forChild()` in Angular?

🔹 `forRoot()`

Used in root module to configure global providers or singletons.

🔹 `forChild()`

Used in feature modules to prevent re-instantiating services.

✅ Example:

RouterModule.forRoot(routes) // AppModule
RouterModule.forChild(childRoutes) // FeatureModule

✅ 21. How to handle multiple HTTP requests in Angular?

Use RxJS operators like forkJoin, combineLatest, zip, or merge.

✅ `forkJoin` Example:

forkJoin([
  this.service.getUser(),
  this.service.getOrders()
]).subscribe(([user, orders]) => {
  console.log(user, orders);
});

forkJoin waits for all Observables to complete.

✅ 22. Map vs mergeMap vs switchMap vs concatMap

Operator	Behavior
`map`	Transforms values
`mergeMap`	Flattens & merges inner Observables concurrently
`switchMap`	Cancels previous, switches to new Observable
`concatMap`	Runs requests sequentially

✅ Example:

search$.pipe(
  debounceTime(300),
  switchMap(term => this.api.search(term))
)

switchMap is great for search/autocomplete where you want the latest request only.

✅ 23. What are class decorators?

Class decorators add metadata or modify behavior of classes.

✅ Common Angular Class Decorators:

@Component
@Injectable
@Directive
@NgModule

Example:

@Injectable({ providedIn: 'root' })
export class MyService {}

✅ 24. What is the `@Component` Decorator in Angular?

Used to define a component and its metadata.

✅ Example:

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent {}

✅ 25. What is Bundle Analysis in Angular?

Used to inspect and reduce the size of the production bundle.

✅ Tools:

Angular CLI:

ng build --stats-json
ng build --configuration production --stats-json

webpack-bundle-analyzer

Helps:

Find large packages
Remove unused code
Improve load time

✅ 26. When to Use PUT and PATCH?

Method	Use Case
`PUT`	Replace the entire resource
`PATCH`	Update part of the resource

Example:

// PUT - Replace
this.http.put('/api/user/1', userData);

// PATCH - Update only part
this.http.patch('/api/user/1', { name: 'New Name' });

✅ 27. What is the purpose of `angular.json`?

This is the Angular workspace configuration file.

It configures:

Build and serve targets
Assets, styles, scripts
File replacements (e.g., environments)
Linting and testing

✅ 28. Angular 17 New Features (Highlights)

Deferrable Views: Lazy load components at a finer granularity using @defer
Control Flow Syntax: Built-in @if, @for, @switch (no more *ngIf, *ngFor)
Standalone Project Structure by Default
Signal-based reactivity (experimental)
Zone-less by default for faster change detection

✅ 29. Difference: Standard Component vs Standalone Component

Feature	Standard Component	Standalone Component
Module required?	Yes	No
Declaration	In `@NgModule`	`standalone: true`
Angular 14+	❌	✅

✅ Example:

@Component({
  standalone: true,
  imports: [CommonModule],
  template: `...`
})
export class MyStandaloneComponent {}

✅ 30. What is `bootstrapModule` in Angular?

It's the method Angular uses to launch the root module.

✅ Example:

platformBrowserDynamic().bootstrapModule(AppModule);

In standalone component apps (Angular 17+), it can also bootstrap a component:

bootstrapApplication(AppComponent);

✅ 31. Angular Testing Framework

Angular uses Jasmine for writing tests and Karma for running them.

🔹 Key Concepts:

TestBed: Angular testing environment setup
Fixtures: Handle component instances
Spies: Mock services/functions

✅ Example (Component Test):

describe('AppComponent', () => {
  let fixture: ComponentFixture<AppComponent>;
  let component: AppComponent;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [AppComponent]
    }).compileComponents();

    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
  });

  it('should create the component', () => {
    expect(component).toBeTruthy();
  });

  it('should have title "MyApp"', () => {
    component.title = 'MyApp';
    fixture.detectChanges();
    expect(component.title).toBe('MyApp');
  });
});

✅ 32. Pre-fetch Your Data Using Resolvers

Resolvers fetch data before navigating to a route.

✅ Use case: Prevents component from loading with incomplete data.

✅ Steps:

Create a Resolver:

@Injectable({ providedIn: 'root' })
export class UserResolver implements Resolve<User> {
  constructor(private service: UserService) {}

  resolve(route: ActivatedRouteSnapshot): Observable<User> {
    return this.service.getUserById(route.paramMap.get('id'));
  }
}

Add it to route:

{
  path: 'user/:id',
  component: UserComponent,
  resolve: { user: UserResolver }
}

In component:

this.route.data.subscribe(data => {
  this.user = data.user;
});

✅ 33. Guard in Angular

Guards control access to routes.

🔸 Types:

CanActivate
CanDeactivate
CanLoad
Resolve
CanActivateChild

✅ Example (`CanActivate`):

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(): boolean {
    if (!this.authService.isLoggedIn()) {
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }
}

Apply it to route:

{ path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] }

✅ 34. HostBinding and HostListener

These allow interaction with the host element of the component or directive.

✅ `@HostBinding` Example:

@HostBinding('class.active') isActive = true;

✅ `@HostListener` Example:

@HostListener('click', ['$event'])
onClick(event: Event) {
  console.log('Element clicked!', event);
}

Used frequently in custom directives.

✅ 35. Polyfill in Angular

Polyfills provide browser compatibility for features not supported in older browsers.

✅ Config:

Check polyfills.ts file in Angular project.

// Example polyfill for ES6 features
import 'core-js/es6';

Most modern Angular apps only need a few because of evergreen browser support.

✅ 36. RouterOutlet in Angular

<router-outlet> acts as a placeholder where routed components are rendered.

✅ Example:

<nav>
  <a routerLink="/home">Home</a>
</nav>

<router-outlet></router-outlet>

Defined in app-routing.module.ts:

const routes: Routes = [
  { path: 'home', component: HomeComponent }
];

✅ 37. Can We Use Multiple `<router-outlet>`?

Yes — useful for layouts with named outlets.

✅ Example:

<router-outlet></router-outlet>           <!-- Primary -->
<router-outlet name="popup"></router-outlet> <!-- Secondary -->

Routes:

{
  path: 'help',
  component: HelpComponent,
  outlet: 'popup'
}

Activate via:

this.router.navigate([{ outlets: { popup: ['help'] } }]);

✅ 38. Can I Write a Component Without a Constructor?

Yes — but only if the component does not need any DI services.

✅ Minimal Example:

@Component({
  selector: 'app-hello',
  template: `<p>Hello!</p>`
})
export class HelloComponent {}

If you need services like HttpClient, you’ll need a constructor.

✅ 39. Pure Pipe vs Impure Pipe

Pipe Type	Trigger
Pure (default)	Called only when input changes
Impure	Called on every change detection cycle

✅ Pure Pipe Example:

@Pipe({ name: 'purePipe' })
export class PurePipe implements PipeTransform {
  transform(value: number): number {
    return value * 2;
  }
}

✅ Impure Pipe:

@Pipe({ name: 'impurePipe', pure: false })

Use impure pipes carefully — they affect performance!

✅ 40. FormBuilder vs FormGroup in Angular

Both are part of Reactive Forms.

Concept	Use Case
`FormGroup`	Manually create controls
`FormBuilder`	Shorthand, more concise

✅ FormGroup Example:

this.form = new FormGroup({
  name: new FormControl(''),
  age: new FormControl('')
});

✅ FormBuilder Example:

constructor(private fb: FormBuilder) {}

this.form = this.fb.group({
  name: [''],
  age: ['']
});

✅ 41. View Encapsulation in Angular (Recap)

Angular uses View Encapsulation to control style scoping.

🔸 Modes:

Mode	Description
`Emulated` (default)	Emulates Shadow DOM by adding unique attributes
`None`	No encapsulation; styles are global
`ShadowDom`	Uses browser-native Shadow DOM (real encapsulation)

✅ Example:

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css'],
  encapsulation: ViewEncapsulation.Emulated
})

✅ Use Case:

Use None for global themes (e.g., Angular Material theming).
Use ShadowDom for strict style isolation.

✅ 42. Difference Between Modules and Components

Feature	Module	Component
Purpose	Group related components/services	Represent UI elements/pages
Decorator	`@NgModule`	`@Component`
Structure	Logical grouping	Visual/UI rendering

✅ Example:

@NgModule({
  declarations: [UserComponent],
  imports: [CommonModule],
})
export class UserModule {}

@Component({
  selector: 'app-user',
  template: `<p>User Component</p>`
})
export class UserComponent {}

✅ 43. Lazy Loading in Angular

Lazy loading loads modules on demand, improving initial load time.

✅ Setup:

Create a feature module (e.g., admin.module.ts)
Use loadChildren in the route:

{
  path: 'admin',
  loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
}

Ensure AdminModule has its own routing (AdminRoutingModule) with its components.

✅ 44. Dynamic Component Loading

Use ViewContainerRef and ComponentFactoryResolver to load components dynamically.

✅ Example:

@ViewChild('container', { read: ViewContainerRef }) container!: ViewContainerRef;

constructor(private cfr: ComponentFactoryResolver) {}

loadComponent() {
  import('./dynamic/dynamic.component').then(({ DynamicComponent }) => {
    this.container.clear();
    this.container.createComponent(DynamicComponent);
  });
}

Template:

<ng-template #container></ng-template>

✅ 45. Change Detection in Angular

Angular uses zone.js to trigger change detection automatically on async events.

🔸 Strategies:

Default: Detects all changes (slower)
OnPush: Detects changes only for input-bound values

✅ Example:

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush
})

✅ Improve Performance:

Use OnPush when using immutables and @Input
Detach CD manually in performance-heavy components

✅ 46. Zone.js in Angular

zone.js patches async APIs (e.g., setTimeout, Promise) to notify Angular of state changes.

🔹 Without zone.js, Angular wouldn't know when to run change detection.

With Angular 17, zone-less change detection using Signals is becoming the default.

✅ 47. Signals in Angular 17

Signals offer a reactivity model without needing zone.js or manual subscription management.

✅ Setup:

import { signal, computed, effect } from '@angular/core';

count = signal(0);

double = computed(() => this.count() * 2);

effect(() => console.log(this.double()));

✅ Benefit:

Fine-grained reactivity
Works without zones
Declarative like React’s useState/useEffect

✅ 48. Standalone Components

No need for NgModules. Useful for reducing boilerplate.

✅ Example:

@Component({
  selector: 'app-home',
  standalone: true,
  template: `<h1>Hello!</h1>`,
  imports: [CommonModule]
})
export class HomeComponent {}

✅ Bootstrap App with Standalone:

bootstrapApplication(HomeComponent);

✅ 49. Defer Blocks in Angular 17

@defer is used to lazy load parts of templates (not just routes!).

✅ Example:

@defer (when visible) {
  <expensive-component></expensive-component>
}

✅ Use Cases:

Load chart, table, or modal only when visible
Improve First Contentful Paint (FCP)

✅ 50. @Input, @Output vs Signals

Feature	@Input/@Output	Signals
Data Flow	Parent → Child / Child → Parent	Bi-directional and reactive
Reactive?	No	Yes
Boilerplate	More	Less
Angular Version	Stable since v2	Angular 16+

✅ Signal Example:

count = signal(0);

increment() {
  this.count.set(this.count() + 1);
}

✅ When to Use:

Use @Input/@Output for compatibility.
Use Signals for state management and zone-less CD in Angular 17+.

DEV Community: Dhivya Delphina

Angular Scenario Based Questions

🔹 1. Component Communication

🔹 2. Lazy Loading and Route Guards

🔹 3. Reactive Forms + Validation

🔹 4. Handling Multiple HTTP Requests

🔹 5. State Management Without NgRx

🔹 6. Performance Optimization

🔹 7. Error Handling in HTTP Calls

🔹 8. Unit Testing a Component

🔹 9. Dynamic Form Generation

🔹 10. Standalone Components

🔹 11. Designing a Scalable Architecture for a Large Angular App

🔹 12. Onboarding Junior Developers Quickly

🔹 13. Integrating a Third-Party Widget into Angular

🔹 14. Signal vs BehaviorSubject in Shared State

🔹 15. Performance Drops on Large Tables

🔹 16. Upgrade from Angular 14 to 17

🔹 17. Authentication Across Micro Frontends

🔹 18. CI/CD Integration and Previews

🔹 19. Code Review Guidelines for Angular Projects

🔹 20. Team Debugging and Error Monitoring

Reactivity in Angular

✅ What Does Reactive Mean?

🧠 Think of It Like This:

🆚 Imperative vs Reactive

✅ Example in Angular

🟦 Imperative Approach:

🟩 Reactive with Signal:

✅ In Angular Context:

Reactive Features:

🎯 Benefits of Reactive Code

✅ 1. RxJS Observables (Reactive via Streams)

Use Case: React to timer or HTTP data

✅ 2. Signals (Angular 16+): Fine-Grained Reactivity

Use Case: Modern, reactive state without zones

✅ 3. Reactive Forms: Reactive Form Validation and Updates

Use Case: Live form validation and value tracking

🧠 Summary Table

✅ Scenario: Live User Profile Editor with Signals

🏗️ Step-by-Step Setup

1️⃣ Create a Shared Signal Store Service

2️⃣ Parent Component: UserProfileComponent

3️⃣ Child Component: UserEditorComponent

✅ Live Flow Example:

🎁 Bonus: Add a Derived Value with computed()

🔄 Summary

🔍 1. Constructor-based Dependency Injection

✅ Traditional and most common method.

🔧 How it works:

✅ Benefits:

❌ Limitations:

🔥 2. inject() Function (from Angular v14+)

🔧 How it works:

✅ Benefits:

❌ Limitations:

✅ When to Use Which?

✅ Real World Mixed Example

🧠 TL;DR

Angular Concepts Overview

✅ 1. What is Angular, and why does Angular use TypeScript?

🔹 Angular:

🔹 Why TypeScript?

🧠 Key Reasons Angular uses TypeScript:

✅ Real-world analogy:

✅ 2. What is Angular Material?

🔹 Features:

🔹 Example:

✅ Scenario:

✅ 3. What is a directive, and what are the types of directives?

🔹 A directive in Angular is a class with a @Directive decorator that lets you manipulate the DOM or component behavior.

🔸 Types of Directives:

🔹 Example: Custom Attribute Directive

✅ 4. What are the building blocks of Angular?

✅ 5. What is Dependency Injection (DI)?

🔹 Benefits:

🔹 Example:

✅ Real-world analogy:

✅ 6. What is Data Binding, and how many ways can it be implemented?

🔹 1. Interpolation ({{ }})

2️⃣ Parent Component: `UserProfileComponent`

3️⃣ Child Component: `UserEditorComponent`

🎁 Bonus: Add a Derived Value with `computed()`

🔹 A directive in Angular is a class with a `@Directive` decorator that lets you manipulate the DOM or component behavior.

🔹 1. Interpolation (`{{ }}`)

🔹 2. Property Binding (`[property]`)

🔹 3. Event Binding (`(event)`)

🔹 4. Two-way Binding (`[(ngModel)]`)

🔸 `RouterOutlet`

🔸 `RouterLink`

✅ 11. What happens when you use the `<script>` tag within a template?

✅ 12. What is `ViewChild`, and when would you use `{ static: false }`?

🔹 `@ViewChild`

🔹 `static: false`

🔹 `static: true`

✅ 16. What is `"sourceMap": true` in Angular?

✅ 20. What are `forRoot()` and `forChild()` in Angular?

🔹 `forRoot()`

🔹 `forChild()`

✅ `forkJoin` Example:

✅ 24. What is the `@Component` Decorator in Angular?

✅ 27. What is the purpose of `angular.json`?