Angular Interview Questions - Testing, Best Practices & Advanced (121-150)

Question 121: What Testing Tools does Angular Provide?

1. Jasmine: Testing framework (for describe(), it(), expect())
2. Karma: Test runner
3. Angular Testing Utilities: TestBed, ComponentFixture, etc.
4. Cypress: E2E testing (optional but popular!)

---

Question 122: What is TestBed?

TestBed is Angular's primary API for configuring and creating an Angular testing module!

Example of Component Test:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MyComponent } from './my.component';
import { MyService } from './my.service';

// Mock service
class MockMyService {
  getData() { return of('mock data'); }
}

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [MyComponent], // Import standalone component
      providers: [
        { provide: MyService, useClass: MockMyService } // Provide mock
      ]
    }).compileComponents();

    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

---

Question 123: What is ComponentFixture?

ComponentFixture is a test harness for interacting with a component and its element! Properties/methods:

• componentInstance: The component instance!
• nativeElement: The DOM element!
• detectChanges(): Runs change detection!

---

Question 124: How to Test a Service?

import { TestBed } from '@angular/core/testing';
import { UserService } from './user.service';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';

describe('UserService', () => {
  let service: UserService;
  let httpMock: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule], // Mock HttpClient
      providers: [UserService]
    });
    service = TestBed.inject(UserService);
    httpMock = TestBed.inject(HttpTestingController);
  });

  it('should fetch users', () => {
    const mockUsers = [{ id: 1, name: 'Alice' }];
    
    service.getUsers().subscribe(users => {
      expect(users).toEqual(mockUsers);
    });
    
    // Expect a request
    const req = httpMock.expectOne('https://jsonplaceholder.typicode.com/users');
    expect(req.request.method).toBe('GET');
    req.flush(mockUsers); // Respond with mock data
  });

  afterEach(() => {
    httpMock.verify(); // Verify no outstanding requests
  });
});

---

Question 125: What is HttpClientTestingModule?

HttpClientTestingModule is a test module that provides a mock HttpClient to test HTTP requests without making real API calls!

---

Question 126: What is E2E Testing in Angular?

E2E (End-to-End) tests simulate real user interactions with your app! Popular E2E frameworks:

• Cypress: Modern, developer-friendly
• Protractor: Angular's old E2E framework (deprecated!)

---

Question 127: What are Angular Best Practices?

1. Use standalone components (Angular 14+)
2. Use OnPush change detection
3. Use async pipe to prevent memory leaks
4. Lazy load modules and components
5. Use trackBy in *ngFor
6. Write tests for critical components/services
7. Follow Angular Style Guide
8. Keep components small and focused (SRP)
9. Use services for business logic
10. Use reactive forms for complex forms

---

Question 128: What is the Angular Style Guide?

Official Angular guidelines for writing clean, maintainable code! Covers things like:

• File naming conventions
• Component structure
• Naming conventions
• Dependency injection
• Etc.

---

Question 129: What are Angular Elements?

Angular Elements lets you package Angular components as custom elements (web components) that can be used in non-Angular apps!

---

Question 130: What is NgRx?

NgRx is a state management library for Angular inspired by Redux! It uses:

• Store: Centralized state container
• Actions: Describe what happened
• Reducers: Pure functions to update state
• Effects: Handle side effects (API calls, etc.)
• Selectors: Efficiently get derived state

---

Question 131: What is State Management in Angular Options?

1. Local state with @Input/@Output
2. Services with RxJS Subjects
3. NgRx
4. Akita
5. NgXs
6. Signals (Angular 16+)

---

Question 132: What is Internationalization (i18n) in Angular?

Angular provides i18n tools to translate your app into multiple languages!

---

Question 133: What is Accessibility (a11y) in Angular?

Make your app usable by everyone! Best practices:

• Use semantic HTML
• Add ARIA attributes when needed
• Manage focus
• Test with screen readers
• Ensure good color contrast

---

Question 134: What is Angular Animations?

Angular's BrowserAnimationsModule provides a way to add animations! Use @angular/animations!

---

Question 135: What is Angular PWA (Progressive Web App)?

Add PWA capabilities (installable, offline support, push notifications) using @angular/pwa package!

---

Question 136: What is Angular Ivy?

Ivy is Angular's next-generation compilation and rendering pipeline! It's the default since Angular 9! Benefits:

• Smaller bundle sizes
• Faster compilation
• Better debugging
• More flexibility

---

Question 137: What is the Difference Between Promise and Observable?

| Promise | Observable | |---------|------------| | Emits one value | Emits zero or more values over time! | | Eager (executes immediately!) | Lazy (doesn't execute until subscribed!) | | Not cancellable (except with AbortController) | Cancellable with unsubscribe()! | | No operators! | Many operators (map, filter, etc.)! |

---

Question 138: What is Angular CDK?

CDK (Component Dev Kit) is a set of tools to build custom UI components without a Material Design dependency! Provides things like:

• A11y helpers
• Drag and drop
• Overlays
• Scrolling
• Etc.

---

Question 139: What is Angular Material?

Angular Material is a UI component library following Material Design! Built on top of the CDK!

---

Question 140: What is providedIn in @Injectable?

providedIn tells Angular where to provide the service!

• 'root': Singleton app-wide
• 'platform': Singleton across all apps on page
• 'any': New instance per lazy module
• Module/component class: Provide at that level

---

Question 141: What is an Abstract Class as a Dependency Token?

You can use an abstract class as a token and then provide a concrete implementation! Great for DI and testing!

---

Question 142: What is forwardRef?

forwardRef is used when you need to refer to a class that isn't defined yet (circular dependency, or class defined later)!

---

Question 143: What is Angular Schematics?

Schematics are code generators that create or modify files! Used by Angular CLI commands like ng generate component!

---

Question 144: What is ng build --prod?

Builds the app in production mode:

• AOT compilation
• Minification
• Tree shaking
• Dead code elimination
• Etc.

---

Question 145: What is ng serve?

Runs a development server with live-reload!

---

Question 146: What is Angular Versioning?

Angular uses semantic versioning: Major.Minor.Patch! They release a major version every 6 months!

---

Question 147: How to Upgrade Angular Versions?

Use ng update command! It updates your app and dependencies!

ng update @angular/cli @angular/core

---

Question 148: What is the Difference Between Structural and Attribute Directives?

• Structural: Changes DOM structure (*ngIf, *ngFor), adds/removes elements, uses *!
• Attribute: Changes element appearance/behavior (ngClass, ngStyle), doesn't affect DOM structure!

---

Question 149: What are Angular Security Best Practices?

1. Sanitize all user input with DomSanitizer
2. Avoid direct DOM manipulation with ElementRef (use Renderer2)
3. Don't store secrets in client-side code
4. Use HTTPS
5. Keep dependencies updated
6. Use Content Security Policy (CSP)

---

Question 150: What to Know for Angular FAANG Interviews?

✅ Core concepts: Components, directives, pipes, modules, DI! ✅ RxJS: Observables, operators, Subjects! ✅ Forms: Reactive and template-driven! ✅ Routing: Guards, parameters, lazy loading! ✅ Performance: OnPush, async pipe, lazy loading, defer! ✅ Testing: TestBed, component tests, service tests! ✅ State management: Services with RxJS, NgRx (if mentioned in job)! ✅ New features: Standalone components, signals, @defer, control flow (v17+)!