Interview Q&A

ngular has a built-in DI system that allows services to be injected into components or other

services.

Example:

constructor(private authService: AuthService) {}

Real-Time Example:

In an e-commerce app:

• Inject CartService into CartComponent to manage cart items.

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.

Answer: @ngrx/store provides a Redux-style store implementation. It holds the application state as a single immutable object. Provides selectors to access state slices. Dispatches actions to modify the state via reducers.

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 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']);

}));

• angular.json is the workspace configuration file.
• Defines project settings including:
• Build and serve options
• File assets
• Environment configurations
• Output paths
• Third-party library styles and scripts
• Controls how Angular CLI builds and serves your app.

• 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.

utomatically.

• You can run code outside Angular's zone to prevent unnecessary change

detection.

✅ Example:

constructor(private ngZone: NgZone) {}

runHeavyTaskOutsideAngular() {

this.ngZone.runOutsideAngular(() => {

// code here won't trigger change detection

});

}

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: navigateByUrl() navigates to a given absolute URL string. Example: this.router.navigateByUrl('/home'); Unlike navigate(), it takes a URL string instead of an array of commands. Useful when you want to navigate based on a URL, not commands.

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.

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.

• Used mainly by feature modules that provide services and routes.
• forRoot() configures and provides singleton services for the app. Usually called

in the root module.

• forChild() configures child routes without providing new service instances.

Example:

RouterModule.forRoot(routes) // for root app routing

RouterModule.forChild(childRoutes) // for feature module routing

ngular for performance improvement?

Memoization:

technique to cache the results of expensive function calls and return the cached result

when inputs are the same.

How it helps:

• Avoids recalculating heavy operations on every change detection.
• Improves performance for pure functions or selectors.

✅ Example in Angular:

const memoizedFunction = memoize((input) => {

// expensive calculation

return result;

});

this.result = memoizedFunction(input);

You can use libraries like lodash's _.memoize or write your own.

ngular Module System

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));

component is the building block of Angular apps. Each component controls a part of

the UI.

component includes:

• TypeScript class
• HTML template
• CSS styles

Example:

@Component({

selector: 'app-login',

templateUrl: './login.component.html',

styleUrls: ['./login.component.css']

})

export class LoginComponent {

// logic here

}

Real-Time Example:

In a ride-sharing app:

• LoginComponent handles user login.
• MapComponent shows real-time driver locations.

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: ngular tests? spyOn() creates a spy on a method, allowing you to track calls and override behavior. Example: spyOn(service, 'getData').and.returnValue(of(['mock data'])); Useful for mocking service methods and verifying interactions.

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.

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.

Answer: Validators provides built-in validators like required, minLength, maxLength, email. ✅ Example: new FormControl('', [Validators.required, Validators.email])

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.

<ng-content> is used for content projection, i.e., to pass custom content into a

component from a parent.

Example:

<!-- alert.component.html -->

<div class="alert-box">

<ng-content></ng-content>

</div>

Usage:

<app-alert>

<p>Warning! Something went wrong.</p>

</app-alert>

Real-Time Example:

Reusable modal or alert components that display different messages using

<ng-content>.

• 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

• *ngIf supports an else clause to show alternative template when condition is false.
• Use <ng-template> for the else block.

Example:

<div *ngIf="isLoggedIn; else loginPrompt">

Welcome back!

</div>

<ng-template #loginPrompt>

Please log in.

</ng-template>