🔹 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 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