Interview Q&A

ChangeDetectorRef allows you to manually control change detection:

• detectChanges(): Run change detection immediately.
• markForCheck(): Mark component to check in next cycle.
• detach(): Stop change detection for component.
• reattach(): Resume change detection.

✅ Example:

constructor(private cd: ChangeDetectorRef) {}

updateData() {

this.data = fetchNewData();

this.cd.detectChanges(); // manually trigger update

}

pplications?

• Unsubscribe from Observables using:
• takeUntil with a destroy notifier.
• async pipe which auto-unsubscribes.
• Remove event listeners added manually.
• Avoid retaining references to DOM or large objects.
• Use tools like Chrome DevTools and Angular Profiler.

• Use async/await with Angular's waitForAsync or Jasmine’s done callback.
• Use Angular’s fakeAsync and tick() to simulate asynchronous passage of time.

Example with fakeAsync:

it('should fetch data asynchronously', fakeAsync(() => {

let data;

service.getData().subscribe(result => data = result);

tick(); // simulate async time passing

expect(data).toEqual(['expected data']);

}));

• Lazy loading delays loading feature modules until the user navigates to their route.
• Implemented with the router using loadChildren and dynamic imports.

Example:

const routes: Routes = [

{

path: 'admin',

loadChildren: () => import('./admin/admin.module').then(m =>

m.AdminModule)

}

];

This reduces initial bundle size and improves app startup time.

ngular?

Create a validator function returning an error object or null.

✅ Example (Custom validator checking forbidden name):

function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {

return (control: AbstractControl): ValidationErrors | null => {
const forbidden = nameRe.test(control.value);
return forbidden ? { forbiddenName: { value: control.value } } :

null;

};

}

// Usage:

new FormControl('', [forbiddenNameValidator(/admin/i)])

decorators.

Decorators are functions that add metadata to classes, methods, or properties.

Common Angular Decorators:

Decorator Description

@Componen

Declares a component

@NgModule Declares a module

@Injectab

le

Declares a service for DI

@Input() Pass data from parent to child

@Output() Emit events from child to parent

@Directiv

Create custom directives

Example:

@Component({

selector: 'app-header',

templateUrl: './header.component.html'

})

Real-Time Example:

Use @Input() in a product card to pass product details from a parent

ProductListComponent.

Answer: Pipes transform data in templates. Used with the pipe | operator. Angular provides built-in pipes like date, currency, uppercase, async, etc. Example: <p>{{ birthday | date:'longDate' }}</p>

What interviewers expect

• A clear definition tied to Angular in Angular projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production Angular application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in Angular architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

• Use HttpClientTestingModule and HttpTestingController to mock and

control HTTP requests.

Example:

beforeEach(() => {

TestBed.configureTestingModule({

imports: [HttpClientTestingModule]

});

httpTestingController = TestBed.inject(HttpTestingController);

});

it('should call GET API', () => {

service.getData().subscribe(data => {

expect(data).toEqual(mockData);

});

const req = httpTestingController.expectOne('api/data');

expect(req.request.method).toBe('GET');

req.flush(mockData);

httpTestingController.verify();

});

• Angular CLI supports custom builders to extend build behavior.
• Create a Node.js package implementing the Builder interface.
• Define builder options and logic in a builders.json.
• Use the custom builder in angular.json for build or serve targets.

Use case: Customized builds, code analysis, or special deployment pipelines.

synchronously in Angular?

Use Async Validators returning Observable<ValidationErrors | null>.

✅ Example:

function uniqueUsernameValidator(service: UserService):

syncValidatorFn {

return (control: AbstractControl): Observable<ValidationErrors |

null> => {

return service.checkUsername(control.value).pipe(

map(isTaken => (isTaken ? { uniqueUsername: true } : null))

);

};

}

// Usage:

new FormControl('', null,

uniqueUsernameValidator(this.userService));

pplication?

• Implement a global error handler by extending Angular’s ErrorHandler class:

@Injectable()

export class GlobalErrorHandler implements ErrorHandler {

handleError(error: any) {

// log to server or show user notification

console.error('Global error:', error);

}
}

• Provide it in your AppModule:

providers: [{ provide: ErrorHandler, useClass: GlobalErrorHandler }]

• Can also use HTTP interceptors to catch API errors.

• Create a class with the @Pipe decorator implementing PipeTransform.
• Implement a transform() method with your logic.

Example:

@Pipe({ name: 'exclaim' })

export class ExclaimPipe implements PipeTransform {

transform(value: string): string {

return value + '!!!';
}
}

Use in template:

<p>{{ 'Hello' | exclaim }}</p> <!-- Outputs: Hello!!! -->

Answer: AOT compiles templates before runtime, improving startup performance. Enable via: ng build --aot Usually enabled automatically with --prod. Can be configured in angular.json: "configurations": { "production": { "aot": true } }

What interviewers expect

• A clear definition tied to Angular in Angular projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production Angular application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in Angular architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

• Angular uses the fileReplacements option in angular.json.
• You create environment files like environment.ts and environment.prod.ts.
• During build, Angular replaces the environment file based on the target configuration.

Example in angular.json:

"configurations": {

"production": {

"fileReplacements": [

{

"replace": "src/environments/environment.ts",

"with": "src/environments/environment.prod.ts"

}

}
}

• Allows different API endpoints, debug flags, or configurations per environment.

Best Practices

ngular modules (NgModules) are containers that group related components, directives,

pipes, and services.

Purpose:

• Organize code
• Enable lazy loading
• Manage dependencies

Example:

@NgModule({

declarations: [LoginComponent],

imports: [CommonModule, FormsModule],

exports: [LoginComponent]

})

export class AuthModule {}

Real-Time Example:

• AuthModule for login and registration
• AdminModule for dashboard, user management

• Protractor is built on WebDriverJS for Angular E2E tests.
• Write test specs using Jasmine syntax.
• Run tests against a running Angular app.

Example test:

describe('App E2E Test', () => {

it('should display welcome message', () => {

browser.get('/');

expect(element(by.css('h1')).getText()).toEqual('Welcome');

});

});

Run with:

ng e2e

• Offload heavy computations or tasks to:
• Web Workers to run in background threads.
• ngZone.runOutsideAngular() to prevent triggering change detection

unnecessarily.

• Use RxJS operators like debounce, throttle to optimize async streams.
• Break large tasks into smaller chunks.

Miscellaneous Angular Concepts

ngular?

• Test form validity by setting control values and checking validity state.

Example:

it('should mark form invalid when empty', () => {

component.form.controls['email'].setValue('');

expect(component.form.valid).toBeFalse();

});

it('should mark form valid with correct email', () => {

component.form.controls['email'].setValue('test@example.com');

expect(component.form.valid).toBeTrue();

});

dvanced Angular Topics