Interview Q&A

Short answer: Class Role FormContr ol Tracks value and validation status of a single input FormGroup Groups multiple FormControls into a form FormArray Manages an array of FormControls or FormGroups dynamically

Example code

Class Role
FormContr ol Tracks value and validation status of a single input FormGroup Groups multiple FormControls into a form
FormArray Manages an array of FormControls or FormGroups dynamically

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Aspect Constructor ngOnInit Purpose Initializes the class Lifecycle hook, called after constructor Use Case Inject dependencies Fetch data, initialize logic Called By JavaScript engine Angular

Example code

constructor(private userService: UserService) {} ngOnInit() { this.userService.getUsers().subscribe(users => this.users = users); } Real-Time Example: In a profile component: Use constructor to inject ProfileService Use ngOnInit to fetch the user's data after initialization

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Dependency Injection (DI) is a design pattern in which objects receive their dependencies from an external source, not by creating them. Angular has a built-in DI system that allows services to be injected into components or other services.

Example code

constructor(private authService: AuthService) {} Real-Time Example: In an e-commerce app: Inject CartService into CartComponent to manage cart items.

Real-world example (ShopNest)

A shared CartService is injected into header and product pages so both see the same cart count.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: CustomEvent is a native JavaScript event that allows sending custom data. In Angular, used in event emitters to pass data from child to parent components. Angular wraps this with @Output() and EventEmitter.

Example code

@Output() myEvent = new EventEmitter<string>(); this.myEvent.emit('some data');

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: TestBed: Core Angular testing utility to configure test modules and components. ngMocks: A library built on top of TestBed to simplify mocking and reduce boilerplate by auto-mocking components, directives, pipes, and services.

Real-world example (ShopNest)

A shared CartService is injected into header and product pages so both see the same cart count.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: BrowserModule includes services essential for running the app in a browser. It also exports CommonModule. Should only be imported once, in the root AppModule. It sets up things like DOM rendering, sanitization, and event handling.

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Angular uses NgZone to detect asynchronous events (like clicks, timers, HTTP). NgZone runs code inside Angular's zone, triggering change detection automatically. You can run code outside Angular's zone to prevent unnecessary change detection. ✅

Example code

constructor(private ngZone: NgZone) {} runHeavyTaskOutsideAngular() { this.ngZone.runOutsideAngular(() => { // code here won't trigger change detection }); }

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

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

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: 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.

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: utomatically. You can run code outside Angular's zone to prevent unnecessary change detection. ✅ constructor(private ngZone: NgZone) {} runHeavyTaskOutsideAngular() { this.ngZone.runOutsideAngular(() => { // code here won't trigger change detection }); } utomatically. You can run code outside Angular's zone to prevent… unnecessary change detection.… ✅

Example code

constructor(private ngZone: NgZone) {} runHeavyTaskOutsideAngular() { this.ngZone.runOutsideAngular(() => { // code here won't trigger change detection }); } 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 }); } 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 }); }

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Memoization: A technique to cache the results of expensive function calls and return the cached result when inputs are the same.

Explain a bit more

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. Angular Module System

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: 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 code

RouterModule.forRoot(routes) // for root app routing RouterModule.forChild(childRoutes) // for feature module routing

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: ngular for performance improvement? Memoization: technique to cache the results of expensive function calls and return the cached result when inputs are the same. 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.

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: A component is the building block of Angular apps. Each component controls a part of the UI. A component includes: TypeScript class HTML template CSS styles

Example code

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

Real-world example (ShopNest)

ShopNest’s ProductListComponent binds *ngFor to products and uses (click) to add to cart.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: spyOn() creates a spy on a method, allowing you to track calls and override behavior.

Example code

spyOn(service, 'getData').and.returnValue(of(['mock data'])); Useful for mocking service methods and verifying interactions.

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: RouterModule provides Angular’s routing functionality. Import it to define routes and use routing directives like [routerLink] and <router-outlet>. It configures navigation and URL handling in the app. Angular CLI & Build System

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: ngular tests? spyOn() creates a spy on a method, allowing you to track calls and override behavior. spyOn(service, 'getData').and.returnValue(of(['mock data'])); Useful for mocking service methods and verifying interactions. ngular tests? spyOn() creates a spy on a method, allowing you to track calls and override… behavior.

Example code

spyOn(service,… 'getData').and.returnValue(of(['mock data'])); Useful for mocking service methods and verifying interactions. 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. 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.

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Validators provides built-in validators like required, minLength, maxLength, email. ✅

Example code

new FormControl('', [Validators.required, Validators.email])

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: <ng-content> is used for content projection, i.e., to pass custom content into a component from a parent.

Example code

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

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: tsconfig.json configures the TypeScript compiler.

Explain a bit more

Specifies: Target JS version (ES5/ES2015) Module system (ESNext/CommonJS) Included/excluded files Compiler options like strictness, decorators support Helps Angular’s build system transpile TS code to browser-compatible JS. Summary Table: Command/File Purpose Angular CLI Tool to scaffold, build, test Angular apps ng serve Run dev server with live reload ng build Compile and output build files Production Build ng build --prod enables optimizations angular.json CLI workspace/project configuration Custom Builder Extend Angular CLI build/serve functionality AOT Compilation Compile templates ahead-of-time for faster startup tsconfig.json TypeScript compiler options for Angular project Testing Angular Applications

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

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

Example code

<div *ngIf="isLoggedIn; else loginPrompt"> Welcome back! </div> <ng-template #loginPrompt> Please log in. </ng-template>

Real-world example (ShopNest)

ShopNest’s ProductListComponent binds *ngFor to products and uses (click) to add to cart.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: E2E testing verifies the entire application flow in a real browser environment. Tests user interactions and integration between components and backend. Ensures app works as expected from a user's perspective.

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: ngular projects? tsconfig.json configures the TypeScript compiler. Specifies: Target JS version (ES5/ES2015) Module system (ESNext/CommonJS) Included/excluded files Compiler options like strictness, decorators support Helps Angular’s build system transpile TS code to browser-compatible JS. Summary Table: Command/File Purpose ngular CLI Tool to… scaffold,……… build, test Angular apps ng serve Run dev server with live…

Explain a bit more

reload ng build Compile and output build files Production Build ng build --prod enables optimizations ngular.json CLI workspace/project configuration Custom Builder Extend Angular CLI build/serve functionality OT Compilation Compile templates ahead-of-time for faster startup tsconfig.json TypeScript compiler options for Angular project Testing Angular Applications

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: FormBuilder helps create form controls/groups/arrays with less boilerplate. ✅

Example code

constructor(private fb: FormBuilder) {} this.profileForm = this.fb.group({ firstName: ['', Validators.required], lastName: [''], email: ['', [Validators.required, Validators.email]] });

Real-world example (ShopNest)

A shared CartService is injected into header and product pages so both see the same cart count.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: The Angular CLI (Command Line Interface) is a tool to create, build, test, and deploy Angular applications. Common Commands: ng new my-app # Create new Angular project ng serve # Run development server ng generate component login # Generate component ng build # Build for production ng test # Run unit tests Real-Time

Example code

In a company, developers use ng generate component invoice to create a new invoice component with all required files. Angular Components & Templates The @Component decorator defines a component in Angular. It tells Angular how to create and display the component by providing metadata such as the selector, template, and styles. ✅ Example: @Component({ selector: 'app-user-card', templateUrl: './user-card.component.html', styleUrls: ['./user-card.component.css'] }) export class UserCardComponent {} 📌 Real-Time Example: In a CRM app, @Component({ selector: 'app-customer' }) is used to define a reusable customer display card. the different types. Data binding connects the component's class logic with its template (HTML). ✳ Types of Data Binding: Type Syntax Description Interpolation {{ value }} Bind component data to HTML Property Binding [property]="val ue" Bind DOM properties to component Event Binding (event)="handle r()" Bind DOM events to component methods Two-Way Binding [(ngModel)]="va lue" Sync data both ways (input ↔ component) ✅ Example: <!-- Interpolation --> <h1>{{ title }}</h1> <!-- Property Binding --> <input [value]="name" /> <!-- Event Binding --> <button (click)="greetUser()">Greet</button> <!-- Two-Way Binding --> <input [(ngModel)]="username" /> in templates? *ngIf: Conditionally includes or removes an element. *ngFor: Iterates over a list and renders template for each item. ✅ Example: <!-- *ngIf --> <div *ngIf="isLoggedIn">Welcome, {{ user.name }}</div> <!-- *ngFor --> <ul> <li *ngFor="let product of products">{{ product.name }}</li> </ul> 📌 Real-Time Example: E-commerce product list: *ngFor displays product cards dynamically. Angular? ➤ Parent to Child: Use @Input() // child.component.ts @Input() userData: any; <!-- parent.component.html --> <app-child [userData]="user"></app-child> ➤ Child to Parent: Use @Output() + EventEmitter // child.component.ts @Output() notify = new EventEmitter<string>(); this.notify.emit('Hello Parent!'); <!-- parent.component.html --> <app-child (notify)="handleNotification($event)"></app-child> 📌 Real-Time Example: Pass user object to UserCardComponent via @Input. Emit "user clicked" event back to parent with @Output. describe them. Lifecycle hooks are methods that Angular calls at specific stages of a component's existence. 🌀 Common Lifecycle Hooks: Hook Description ngOnInit Called once after component is initialized ngOnChanges Called when input properties change ngDoCheck Called during every change detection ngAfterViewI nit Called after component’s view has been initialized ngOnDestroy Cleanup just before the component is destroyed ngOnChanges() is called whenever an @Input() property changes in the component. ✅ Example: @Input() user: User; ngOnChanges(changes: SimpleChanges) { console.log('User changed:', changes.user.currentValue); } 📌 Real-Time Example: When a new user is selected in a dashboard, ngOnChanges() updates the user detail card dynamically. do you implement it? Two-way data binding means synchronizing the view and the component model automatically. ✅ Syntax: <input [(ngModel)]="username" /> Requires importing FormsModule. 📌 Real-Time Example: In a login form, updating the email input field updates the email property in the component instantly. Angular provides two ways: ➤ Template-Driven Forms: Use ngModel, required, etc. <form #form="ngForm"> <input name="email" [(ngModel)]="email" required /> <div *ngIf="form.controls.email?.invalid">Email is required.</div> </form> ➤ Reactive Forms: Use FormGroup, FormControl, and Validators. form = new FormGroup({ email: new FormControl('', [Validators.required, Validators.email]) }); 📌 Real-Time Example: Login or signup forms showing real-time validation messages. Use Reactive Forms to generate controls at runtime. ✅ Example: form: FormGroup; constructor(private fb: FormBuilder) {} ngOnInit() { this.form = this.fb.group({}); this.questions.forEach(q => { this.form.addControl(q.key, new FormControl('')); }); } 📌 Real-Time Example: Survey builder where form fields change based on user selections. be used? ngModel is a directive that enables two-way data binding in template-driven forms. ✅ Example: <input [(ngModel)]="name" /> Use it when: Working with template-driven forms Simple input binding is sufficient Must import FormsModule. 📌 Real-Time Example: Live search input field using [(ngModel)]="searchQuery" for filtering products. Angular Directives attribute directives in Angular? ➤ Structural Directives: Change the structure/layout of the DOM by adding or removing elements. Prefix: * (e.g., *ngIf, *ngFor) Examples: *ngIf – conditionally includes elements *ngFor – loops over data to render elements *ngSwitch – conditionally renders one view out of many ➤ Attribute Directives: Change the appearance or behavior of an existing DOM element or component. Examples: ngClass – dynamically sets CSS classes ngStyle – sets inline styles dynamically Custom highlight directive (e.g., change color on hover) ✅ Real-Time Analogy: Structural: Like building or removing walls in a house (changes structure). Attribute: Like painting the walls (changes appearance only). directives in Angular? ➤ *ngIf: Conditionally displays content <div *ngIf="isLoggedIn">Welcome!</div> ➤ *ngFor: Iterates over a list <li *ngFor="let item of items">{{ item.name }}</li> ➤ ngSwitch: Selectively renders based on a condition <div [ngSwitch]="status"> <p *ngSwitchCase="'active'">Active</p> <p *ngSwitchCase="'inactive'">Inactive</p> <p *ngSwitchDefault>Unknown</p> </div> Angular? ➤ Steps:

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.