Angular Framework Practice Exam

Question 1 Angular Framework

What is ComponentFixture?

A standalone component, directive, or pipe must be exported to be imported elsewhere. If it's already a top-level standalone element (like a route's loadComponent), exporting is implicit. For re-export from a barrel file, list it:
export { MyComponent } from './my.component'; Common @defer triggers:

on viewport(ref) – when element scrolls into view
on idle – after browser is idle
on immediate – right after render
on timer(Xms) – after delay
on interaction(ref) – on click/focus
on hover(ref) – on mouse hover
when condition() – when a condition is truthy

Triggers can be combined with ;: on viewport; on idle. ComponentFixture is returned by TestBed.createComponent():

fixture.componentInstance – the component class
fixture.debugElement – root debug element
fixture.nativeElement – host DOM element
fixture.detectChanges() – trigger CD

Use fixture.autoDetectChanges(true) for async zone-aware tests. ApplicationRef.tick() triggers a full application-wide change detection cycle. Useful in tests and after out-of-band updates:
this.appRef.tick();
Generally avoid in production — prefer OnPush or signals for targeted CD.

Question 2 Angular Framework

What is the difference between forRoot and forChild?

You can alias an input while keeping the class property name:
readonly name = input.required<string>({ alias: 'userName' });
Bind via the alias: <app-greet [userName]="user.name">. This decouples public API names from internal class properties. Angular 21+ (experimental) introduces signal-based forms via FormControl.signalValue() / signal inputs. Today, the recommended pattern is to bridge reactive forms with signals:
readonly value = toSignal(this.form.valueChanges);
Or use form.value directly inside computed(). RouterModule.forRoot(routes) is used once in the root module to configure the router with the main routes and register the Router service.
RouterModule.forChild(routes) is used in feature modules to register additional routes without re-providing the Router service. Using forRoot more than once causes unexpected behavior. provideEnvironmentInitializer(() => { ... }) runs after providers are configured but before bootstrap. Useful to register side effects (logging, telemetry, registering providers dynamically). Returns nothing.

Question 3 Angular Framework

What is a Resolver in Angular routing?

Lazy loading delays the loading of a feature module until the user navigates to its route. This reduces the initial bundle size. It is configured with:
{ path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) } @HostListener binds a host element event to a handler:
@HostListener('click', ['$event']) onClick(e: MouseEvent) { ... }
Equivalent to host: { '(click)': 'onClick($event)' }. Prefer using the host metadata for new code. A Resolver is a service implementing Resolve<T> that pre-fetches data before a route is activated. The resolved data is available via ActivatedRoute.data. This ensures the component has its required data before rendering, avoiding empty states or loading indicators on initial display. Template-driven forms use directives like ngModel in the template and are simpler for basic forms.
Reactive forms use FormGroup and FormControl in the component class, offering more control, easier testing, and better handling of dynamic or complex forms. Reactive forms require importing ReactiveFormsModule.

Question 4 Angular Framework

What is Angular Universal (SSR)?

Order for a child component:

ngOnChanges (when inputs change)
ngOnInit (once)
ngDoCheck
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
ngOnDestroy

ngAfterContent* hooks fire before ngAfterView* hooks. output() supports aliases:
readonly click = output<void>({ alias: 'onClick' });
Bind via the alias: <app-x (onClick)="handle()">. Same pattern as input alias — separates internal vs external API. This provider configures Angular to skip Zone.js and rely on signals + OnPush for change detection. Required for fully zoneless apps in Angular 18. Scheduled to stabilize as provideZonelessChangeDetection() in a later release. Angular Universal renders the application on the server for the initial HTML response, then the browser hydrates it:

bootstrapApplication(AppComponent, {
  providers: [provideClientHydration()]
});

Benefits: faster first paint, SEO, social previews.

Question 5 Angular Framework

What are incremental hydration and @defer in SSR?

Angular 19+ adds incremental hydration — defer server-side rendering of specific template blocks until needed:
@defer (hydrate on viewport) { <heavy-component /> }
Reduces SSR cost and improves TTFB while keeping interactivity. provideRouter(routes, withComponentInputBinding(), withViewTransitions()) is the standalone-friendly provider for routing. It replaces RouterModule.forRoot() and accepts feature functions like:

withComponentInputBinding() – binds route params to @Input()
withViewTransitions() – enables View Transitions API
withInMemoryScrolling() – scroll restoration
withHashLocation() – hash-based routing

It avoids NgModule boilerplate. ViewEncapsulation controls whether component styles leak out or are scoped:

Emulated (default) – adds attribute selectors to scope styles
None – global styles, no scoping
ShadowDom – uses native Shadow DOM (requires browser support)

Set via @Component({ encapsulation: ViewEncapsulation.None }). ApplicationRef.tick() triggers a full application-wide change detection cycle. Useful in tests and after out-of-band updates:
this.appRef.tick();
Generally avoid in production — prefer OnPush or signals for targeted CD.

Question 6 Angular Framework

What is Location.go() vs router.navigate()?

An Angular library is a publishable package within your workspace:
ng generate library ui-kit
Use libraries for shared components, services, and utilities to enforce API boundaries and enable tree-shaking per consumer. Angular 19+ adds incremental hydration — defer server-side rendering of specific template blocks until needed:
@defer (hydrate on viewport) { <heavy-component /> }
Reduces SSR cost and improves TTFB while keeping interactivity. Location.go('/users/1') changes the URL without triggering router navigation. Useful for setting state without re-rendering. router.navigate() goes through the full navigation pipeline (guards, resolvers, components). CanDeactivate guards leaving a route, e.g., to warn about unsaved changes:

export const unsavedChangesGuard: CanDeactivateFn<HasFormComponent> = (component) => {
  return component.canDeactivate() ? true : confirm('Discard changes?');
};

Return true, false, UrlTree, or an Observable/Promise resolving to one.

Question 7 Angular Framework

What is provideAnimations() vs provideNoopAnimations()?

navigate(commands, extras) – array-based: router.navigate(['users', user.id])
navigateByUrl(url) – string-based: router.navigateByUrl('/users/1')

Prefer navigate() with arrays because it handles parameter encoding and matrix params cleanly.

provideAnimations() – enables @angular/animations full engine
provideNoopAnimations() – registers animations but renders synchronously without animation (useful for tests)
provideAnimationsAsync() – lazy-loads the animation engine on first use

Required once at bootstrap for any @Component({ animations: [...] }) usage. CanMatch runs before route matching. If it returns false, the router tries the next route definition. Use it for feature flags or role-based route selection:
{ path: 'beta', canMatch: [betaEnabledGuard], component: BetaComponent }
CanActivate runs after matching and simply cancels navigation. Use CanMatch when you need conditional route resolution. Implement the HttpInterceptor interface:

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const cloned = req.clone({ setHeaders: { Authorization: 'Bearer ' + this.token } });
    return next.handle(cloned);
  }
}

Register it in providers with HTTP_INTERCEPTORS multi-token.

Question 8 Angular Framework

What is the @Output decorator?

@Output() marks a property as an event emitter that sends data from a child to a parent component:
Child: @Output() notify = new EventEmitter<string>();
Child method: this.notify.emit('Hello');
Parent template: <app-child (notify)="onNotify($event)"></app-child>

Cold Observable: creates a new producer per subscription. Each subscriber gets its own data. HttpClient.get() is cold.
Hot Observable: producer exists outside the Observable; subscribers share the same stream. fromEvent, Subject are hot.

Use share() / shareReplay() to multicast a cold Observable.

Builders: run tasks like build, test, lint. Configured in angular.json
Schematics: generate or transform code. ng generate component invokes a schematic

Custom builders/schematics enable repeatable automation in monorepos. An HTTP interceptor is a service implementing HttpInterceptor that intercepts and optionally transforms HTTP requests and responses. Common use cases:

Adding authentication tokens to headers
Logging requests and responses
Global error handling
Showing/hiding a loading spinner

Question 9 Angular Framework

What are validators: composition in modern Angular?

Template-driven forms use directives like ngModel in the template and are simpler for basic forms.
Reactive forms use FormGroup and FormControl in the component class, offering more control, easier testing, and better handling of dynamic or complex forms. Reactive forms require importing ReactiveFormsModule. The Angular CLI (ng) is a command-line tool for scaffolding and managing Angular projects. Key commands:

ng new – create a new project
ng generate component/service/module – generate code
ng serve – start a dev server
ng build – build for production
ng test – run unit tests

Validators are functions composed in arrays:
email: ['', [Validators.required, Validators.email, Validators.maxLength(120)]]
Errors from all validators are aggregated on control.errors. Use Validators.compose([...]) for shared reusable groups. ngProjectAs re-maps projected content to a specific selector:

<app-card>
  <div *ngIf="hasHeader" ngProjectAs="[slot=header]">Header</div>
</app-card>

Useful when wrapping projected content in a structural directive that would otherwise break the selector matching.

Question 10 Angular Framework

What is the @let block in Angular 18?

A Signal is a reactive primitive introduced in Angular 16 that wraps a value and notifies interested consumers when the value changes:

const count = signal(0);
count.set(1);
count.update(v => v + 1);

Reading count() inside a template, computed(), or effect() automatically tracks the dependency. @let declares a local template variable scoped to the surrounding block:

@let discounted = price() * 0.9;
{{ discounted }}

It supports arbitrary expressions, is reactive (re-evaluates when signals it reads change), and cannot be reassigned. Useful for computed display values without a computed() in the component class. HttpClient is a service in @angular/common/http for making HTTP requests. It returns Observables and supports:

get(), post(), put(), delete()
Typed responses with generics
Request/response headers
Query parameters
Progress events

Import HttpClientModule to use it. Key differences:

signal() is synchronous and accessed by calling it as a function: count()
BehaviorSubject is an RxJS Observable that requires subscribe() and works with operators
Signals integrate with Angular's change detection automatically; BehaviorSubject needs async pipe or markForCheck()
BehaviorSubject supports operators like debounceTime; signals do not natively

Use toSignal() / toObservable() to interoperate.

Question 11 Angular Framework

How do you make a GET request with HttpClient?

ElementRef.nativeElement bypasses Angular's view layer and breaks SSR/hydration. Renderer2 (inject or via @Directive) abstracts DOM operations:
this.renderer.setStyle(el, 'color', 'red');
Use Renderer2 for cross-platform rendering, Web Worker support, and security. Use the get() method with a generic type:

this.http.get<User[]>('/api/users').subscribe({
  next: users => this.users = users,
  error: err => console.error('Failed:', err)
});

The request is executed only when subscribed to, as HttpClient returns a cold Observable. Environment files (environment.ts and environment.prod.ts) store configuration values that differ between environments, such as API URLs and feature flags. Angular CLI automatically swaps the file during build:

export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000'
};

@Output() marks a property as an event emitter that sends data from a child to a parent component:
Child: @Output() notify = new EventEmitter<string>();
Child method: this.notify.emit('Hello');
Parent template: <app-child (notify)="onNotify($event)"></app-child>

Question 12 Angular Framework

What is the model() input/output API?

Lifecycle hooks are methods that Angular calls at specific moments in a component's life. Key hooks in order:

ngOnChanges() – input property changes
ngOnInit() – after first ngOnChanges
ngDoCheck() – custom change detection
ngAfterViewInit() – after view initializes
ngOnDestroy() – before component is destroyed

model() creates a two-way bindable signal:
readonly value = model(0);
Use in template: [value]="parentValue" (valueChange)="parentValue = $event" — or use banana syntax with a component that exposes [(value)]="parentValue".
Replaces the need for separate @Input() + @Output() pairs in many cases.

platformBrowser() – registers browser platform services
Modern: provideBrowserGlobalErrorListeners(), provideBrowserGlobalErrorListeners()

These are usually handled by bootstrapApplication() automatically. DestroyRef is an injection token representing a lifecycle owner:

private destroyRef = inject(DestroyRef);
const sub = interval(1000).subscribe(...);
this.destroyRef.onDestroy(() => sub.unsubscribe());

It is the basis for takeUntilDestroyed and custom cleanup hooks.

Question 13 Angular Framework

What is the purpose of the @Injectable decorator?

markForCheck() tells Angular to re-check this component (and ancestors) on the next CD cycle. Use with OnPush when a signal-free mutation occurs:

this.data = newValue;
this.cdr.markForCheck();

Signal-based code usually doesn't need this. Create a class decorated with @Directive({ selector: '[appHighlight]' }):

@Directive({ selector: '[appHighlight]' })
export class HighlightDirective {
  @HostListener('mouseenter') onMouseEnter() {
    this.el.nativeElement.style.backgroundColor = 'yellow';
  }
  constructor(private el: ElementRef) {}
}

@HostListener binds a host element event to a handler:
@HostListener('click', ['$event']) onClick(e: MouseEvent) { ... }
Equivalent to host: { '(click)': 'onClick($event)' }. Prefer using the host metadata for new code. The @Injectable() decorator marks a class as available for Angular's dependency injection system. Setting @Injectable({ providedIn: 'root' }) registers the service as a singleton at the application root level, enabling tree-shaking.

Question 14 Angular Framework

What is OnChanges vs DoCheck?

<ng-container> is a logical grouping element that doesn't render in the DOM — useful with multiple structural bindings:
<ng-container *ngIf="x; else y">...</ng-container>
<ng-template> defines inert content not rendered until referenced (e.g., by *ngIf="...; else ngElse" or ViewContainerRef.createEmbeddedView). <ng-container> instantiates content; <ng-template> defines deferred content. ngOnChanges fires only when an @Input reference changes (not mutations). It receives a SimpleChanges map with previous and current values.
ngDoCheck fires on every change detection cycle. Use it for custom dirty checking, but it is expensive — prefer signals or OnPush. A standalone component, directive, or pipe must be exported to be imported elsewhere. If it's already a top-level standalone element (like a route's loadComponent), exporting is implicit. For re-export from a barrel file, list it:
export { MyComponent } from './my.component'; You can alias an input while keeping the class property name:
readonly name = input.required<string>({ alias: 'userName' });
Bind via the alias: <app-greet [userName]="user.name">. This decouples public API names from internal class properties.

Question 15 Angular Framework

What is lazy loading in Angular?

Lazy loading delays the loading of a feature module until the user navigates to its route. This reduces the initial bundle size. It is configured with:
{ path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) } Use the get() method with a generic type:

this.http.get<User[]>('/api/users').subscribe({
  next: users => this.users = users,
  error: err => console.error('Failed:', err)
});

The request is executed only when subscribed to, as HttpClient returns a cold Observable. From Angular 14+, FormBuilder.nonNullable produces typed, non-nullable controls:

this.form = this.fb.nonNullable.group({
  name: this.fb.nonNullable.control('Alice'),
  age: 0,
});

Initial values are required; reset() restores them. Strongly recommended for type-safe forms. Multi-slot projection uses select on <ng-content>:
Child:

<ng-content select="[slot=header]"></ng-content>
<ng-content></ng-content>
<ng-content select="[slot=footer]"></ng-content>

Parent:

<app-card>
  <div slot="header">Title</div>
  Body
  <div slot="footer">©</div>
</app-card>

Question 16 Angular Framework

What is Angular's deferrable view (@defer)?

@Output() marks a property as an event emitter that sends data from a child to a parent component:
Child: @Output() notify = new EventEmitter<string>();
Child method: this.notify.emit('Hello');
Parent template: <app-child (notify)="onNotify($event)"></app-child> <ng-content> enables content projection, allowing a parent to insert content into a child component's template:
Child template: <div class="card"><ng-content></ng-content></div>
Parent usage: <app-card><p>Projected content here</p></app-card>
It supports multi-slot projection with the select attribute. @defer lazily loads template content only when a trigger fires:

@defer (on viewport) {
  <heavy-chart></heavy-chart>
} @placeholder { <div>Loading...</div> }
@loading (minimum 200ms) { <spinner></spinner> }
@error { <p>Failed to load</p> }

It enables fine-grained code-splitting per template block, beyond route-level lazy loading. An InjectionToken<T> creates a non-class DI token for injecting values, interfaces, or primitives:
export const API_URL = new InjectionToken<string>('API_URL');
Provide it:
{ provide: API_URL, useValue: 'https://api.example.com' }
Consume it:
constructor(@Inject(API_URL) private url: string) {}
Use factory: for computed values and dependencies.

Question 17 Angular Framework

What are the @defer trigger options?

Standalone components (Angular 14+) are components that don't need to be declared in an NgModule. They declare their own dependencies via the imports array in @Component():

@Component({
  standalone: true,
  imports: [CommonModule],
  ...
})

This simplifies the module structure and enables tree-shakable applications. Common @defer triggers:

on viewport(ref) – when element scrolls into view
on idle – after browser is idle
on immediate – right after render
on timer(Xms) – after delay
on interaction(ref) – on click/focus
on hover(ref) – on mouse hover
when condition() – when a condition is truthy

Triggers can be combined with ;: on viewport; on idle. @let declares a local template variable scoped to the surrounding block:

@let discounted = price() * 0.9;
{{ discounted }}

It supports arbitrary expressions, is reactive (re-evaluates when signals it reads change), and cannot be reassigned. Useful for computed display values without a computed() in the component class. Angular 17.2+ adds signal-based query decorators:

readonly header = viewChild<ElementRef>('hdr');
readonly projected = contentChild<MyComponent>(MyComponent);

They return Signals and integrate with effect(). Signal queries are push-based — they emit when the queried element appears, unlike the old @ViewChild static fields.

Question 18 Angular Framework

What is ngProjectAs?

ngProjectAs re-maps projected content to a specific selector:

<app-card>
  <div *ngIf="hasHeader" ngProjectAs="[slot=header]">Header</div>
</app-card>

Useful when wrapping projected content in a structural directive that would otherwise break the selector matching. HttpErrorResponse is thrown for HTTP failures (status outside 200–299). Handle with the second argument to subscribe or with catchError:
this.http.get<User>('/api/u').pipe(catchError(err => of(null))).subscribe(u => ...);
err.status, err.message, and err.error (parsed body) are available.

switchMap – cancel previous, subscribe to newest (search)
mergeMap – run all concurrently (parallel writes)
concatMap – queue, run in order (writes requiring order)
exhaustMap – ignore new emissions while one is in flight (submit button)

Pick by ordering and concurrency requirements. Async validators return an Observable/Promise that resolves to validation errors:

const uniqueEmail: AsyncValidatorFn = (c) =>
  this.http.get<boolean>('/api/check?email=' + c.value).pipe(map(taken => taken ? { taken: true } : null));
control.setAsyncValidators(uniqueEmail);

Set on a control, not a group, by default. Use updateValueAndValidity() to re-run.

Question 19 Angular Framework

What is NgZone?

FormBuilder is an injectable service that provides a shorthand syntax for creating FormGroup, FormControl, and FormArray instances:

this.myForm = this.fb.group({
  name: ['', Validators.required],
  email: ['', [Validators.required, Validators.email]]
});

Lifecycle hooks are methods that Angular calls at specific moments in a component's life. Key hooks in order:

ngOnChanges() – input property changes
ngOnInit() – after first ngOnChanges
ngDoCheck() – custom change detection
ngAfterViewInit() – after view initializes
ngOnDestroy() – before component is destroyed

viewChild() returns a Signal<T | undefined> with a single match.
viewChildren() returns a Signal<readonly T[]> with all matches. The children signal re-emits whenever the query results change (e.g., items added or removed). Use viewChildren for dynamic lists of components. NgZone is Angular's wrapper around Zone.js. It tracks async operations (setTimeout, Promise, events) and triggers change detection. Use NgZone.runOutsideAngular(() => ...) for performance-critical code (e.g., scroll handlers) that should not trigger CD.

Question 20 Angular Framework

What is the purpose of the @Component decorator?

Router emits events during navigation:

NavigationStart
RouteConfigLoadStart / RouteConfigLoadEnd
RoutesRecognized
GuardsCheckStart / GuardsCheckEnd
ResolveStart / ResolveEnd
NavigationEnd
NavigationCancel, NavigationError

Listen via router.events for loading indicators or analytics. Template-driven forms use directives like ngModel in the template and are simpler for basic forms.
Reactive forms use FormGroup and FormControl in the component class, offering more control, easier testing, and better handling of dynamic or complex forms. Reactive forms require importing ReactiveFormsModule. Pass { reportProgress: true } to enable upload/download progress events:
this.http.post('/upload', formData, { reportProgress: true, observe: 'events' });
You'll receive HttpEventType.UploadProgress and DownloadProgress events. Only works with XHR; not with withFetch(). The @Component() decorator marks a class as an Angular component and provides metadata that tells Angular how to process, instantiate, and use the component at runtime. Key properties include:

selector – the custom HTML tag
templateUrl – path to the HTML template
styleUrls – array of stylesheets

Question 21 Angular Framework

What is nonNullable FormBuilder in modern Angular?

provideEnvironmentInitializer(() => { ... }) runs after providers are configured but before bootstrap. Useful to register side effects (logging, telemetry, registering providers dynamically). Returns nothing. From Angular 14+, FormBuilder.nonNullable produces typed, non-nullable controls:

this.form = this.fb.nonNullable.group({
  name: this.fb.nonNullable.control('Alice'),
  age: 0,
});

Initial values are required; reset() restores them. Strongly recommended for type-safe forms. A standalone component, directive, or pipe must be exported to be imported elsewhere. If it's already a top-level standalone element (like a route's loadComponent), exporting is implicit. For re-export from a barrel file, list it:
export { MyComponent } from './my.component'; CDK provides ComponentPortal for portal-based rendering:

const portal = new ComponentPortal(MyComponent);
this.cdkPortalOutlet.attach(portal);

Useful for overlays, dialogs, and dynamic UI patterns.

Question 22 Angular Framework

What is data binding in Angular?

An InjectionToken<T> creates a non-class DI token for injecting values, interfaces, or primitives:
export const API_URL = new InjectionToken<string>('API_URL');
Provide it:
{ provide: API_URL, useValue: 'https://api.example.com' }
Consume it:
constructor(@Inject(API_URL) private url: string) {}
Use factory: for computed values and dependencies. Use the get() method with a generic type:

this.http.get<User[]>('/api/users').subscribe({
  next: users => this.users = users,
  error: err => console.error('Failed:', err)
});

The request is executed only when subscribed to, as HttpClient returns a cold Observable. A service is a class decorated with @Injectable() that encapsulates reusable business logic, data access, or utility functions. Services are typically singletons when provided at the root level and are shared across components via dependency injection. Data binding is a mechanism that connects the component class to the template. Angular supports four forms:

Interpolation: {{ expression }}
Property binding: [property]="expression"
Event binding: (event)="handler()"
Two-way binding: [(ngModel)]="property"

Question 23 Angular Framework

What is runGuardsAndResolvers and what are its options?

runGuardsAndResolvers controls when guards/resolvers re-run on the same component:

'paramsChange' (default) – when path or query params change
'paramsOrQueryParamsChange' – also on query param changes
'always' – every navigation, even with no param changes
'pathParamsChange' – only path params, ignoring query params

Useful to keep the URL stable but refresh data. A Subject is both an Observable and an Observer. It can multicast values to multiple subscribers. Variants include:

BehaviorSubject – stores the latest value and emits it to new subscribers
ReplaySubject – replays a specified number of past emissions
AsyncSubject – emits only the last value upon completion

Key differences:

signal() is synchronous and accessed by calling it as a function: count()
BehaviorSubject is an RxJS Observable that requires subscribe() and works with operators
Signals integrate with Angular's change detection automatically; BehaviorSubject needs async pipe or markForCheck()
BehaviorSubject supports operators like debounceTime; signals do not natively

Use toSignal() / toObservable() to interoperate. CanMatch runs before route matching. If it returns false, the router tries the next route definition. Use it for feature flags or role-based route selection:
{ path: 'beta', canMatch: [betaEnabledGuard], component: BetaComponent }
CanActivate runs after matching and simply cancels navigation. Use CanMatch when you need conditional route resolution.

Question 24 Angular Framework

What is provideRouter() and how does it differ from RouterModule.forRoot?

HttpClient methods accept a generic type and an observe option:

observe: 'body' (default) – return body
observe: 'response' – return full HttpResponse with headers/status
observe: 'events' – return HttpEvent for progress

Example:
this.http.get<User>('/api/user/1', { observe: 'response' }) viewChild() returns a Signal<T | undefined> with a single match.
viewChildren() returns a Signal<readonly T[]> with all matches. The children signal re-emits whenever the query results change (e.g., items added or removed). Use viewChildren for dynamic lists of components. Modifier decorators control where Angular looks for a dependency:

@Self() – only the current injector
@SkipSelf() – start search from parent injector
@Optional() – inject null instead of throwing if not found
@Host() – stop search at the host component

Example:
constructor(@SkipSelf() @Optional() private parent: ParentService) {} provideRouter(routes, withComponentInputBinding(), withViewTransitions()) is the standalone-friendly provider for routing. It replaces RouterModule.forRoot() and accepts feature functions like:

withComponentInputBinding() – binds route params to @Input()
withViewTransitions() – enables View Transitions API
withInMemoryScrolling() – scroll restoration
withHashLocation() – hash-based routing

It avoids NgModule boilerplate.

Question 25 Angular Framework

What is withComponentInputBinding()?

Change detection is Angular's mechanism for keeping the view in sync with the component's data. By default, Angular uses a zone-based strategy that checks all components from root to leaves on every event. You can optimize with ChangeDetectionStrategy.OnPush, which only checks when @Input() references change or events are triggered. @ViewChild queries elements in the component's own template.
@ContentChild queries elements in the component's projected content (content placed between the component's tags via <ng-content>).
ViewChild is available after ngAfterViewInit(); ContentChild is available after ngAfterContentInit(). withComponentInputBinding() enables automatic binding of route params, query params, and resolved data to component @Input() properties:

@Input() id!: string; // :id param
@Input() page!: number; // ?page= query param

This removes the need to inject ActivatedRoute for simple cases and integrates with signal inputs. A Subject is both an Observable and an Observer. It can multicast values to multiple subscribers. Variants include:

BehaviorSubject – stores the latest value and emits it to new subscribers
ReplaySubject – replays a specified number of past emissions
AsyncSubject – emits only the last value upon completion

Question 26 Angular Framework

What is an Angular component?

A component is the fundamental building block of an Angular application. It consists of:

A TypeScript class decorated with @Component()
An HTML template
Optional CSS styles
Metadata such as selector, templateUrl, and styleUrls

RouteReuseStrategy controls whether Angular destroys or reuses a component when navigating away and back. The default destroys it. Custom strategies enable tab-like persistence:

@Injectable()
export class CustomReuseStrategy extends RouteReuseStrategy {
  shouldReuseRoute() { return false; }
  store() { /* save detached handle */ }
  retrieve() { return null; }
}

Provide with { provide: RouteReuseStrategy, useClass: CustomReuseStrategy }. @HostBinding binds a host element property/class/style to a component property:

@HostBinding('class.active') isActive = false;
@HostBinding('attr.role') role = 'button';

Equivalent to declaring host: { '[class.active]': 'isActive' } in @Component. Async validators return an Observable/Promise that resolves to validation errors:

const uniqueEmail: AsyncValidatorFn = (c) =>
  this.http.get<boolean>('/api/check?email=' + c.value).pipe(map(taken => taken ? { taken: true } : null));
control.setAsyncValidators(uniqueEmail);

Set on a control, not a group, by default. Use updateValueAndValidity() to re-run.

Question 27 Angular Framework

What is the *ngFor directive?

*ngFor is a structural directive that repeats a template for each item in a collection:

<li *ngFor="let item of items; let i = index; trackBy: trackByFn">
  {{ i }}: {{ item.name }}
</li>

Using trackBy improves performance by helping Angular identify which items changed. Angular 19+ adds incremental hydration — defer server-side rendering of specific template blocks until needed:
@defer (hydrate on viewport) { <heavy-component /> }
Reduces SSR cost and improves TTFB while keeping interactivity. HttpClient methods accept a generic type and an observe option:

observe: 'body' (default) – return body
observe: 'response' – return full HttpResponse with headers/status
observe: 'events' – return HttpEvent for progress

Example:
this.http.get<User>('/api/user/1', { observe: 'response' })

provideAnimations() – enables @angular/animations full engine
provideNoopAnimations() – registers animations but renders synchronously without animation (useful for tests)
provideAnimationsAsync() – lazy-loads the animation engine on first use

Required once at bootstrap for any @Component({ animations: [...] }) usage.

Question 28 Angular Framework

What is the *ngIf directive?

*ngIf is a structural directive that conditionally includes or removes an element from the DOM based on a boolean expression:

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

Unlike hiding with CSS, *ngIf completely removes the element and its children. TestBed is the primary Angular testing utility that creates a testing module:

await TestBed.configureTestingModule({
  imports: [MyComponent],
  providers: [{ provide: MyService, useValue: stub }]
}).compileComponents();
const fixture = TestBed.createComponent(MyComponent);

Use ViewContainerRef.createComponent() to mount components at runtime:
this.vcr.createComponent(MyComponent);
For dynamic type:
this.vcr.createComponent(await import('./lazy.component').then(m => m.LazyComponent));
Used in dialogs, modals, dashboards. provideHttpClient(withInterceptors([authInterceptor, loggingInterceptor])) replaces the HTTP_INTERCEPTORS-based approach. Interceptors are now simple functions:

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).token();
  return next(req.clone({ setHeaders: { Authorization: 'Bearer ' + token }}));
}

This is the canonical modern pattern.

Question 29 Angular Framework

What is ng-mocks?

provideRouter(routes, withComponentInputBinding(), withViewTransitions()) is the standalone-friendly provider for routing. It replaces RouterModule.forRoot() and accepts feature functions like:

withComponentInputBinding() – binds route params to @Input()
withViewTransitions() – enables View Transitions API
withInMemoryScrolling() – scroll restoration
withHashLocation() – hash-based routing

It avoids NgModule boilerplate. ng-mocks is a popular library for testing modules: it lets you MockComponent(MyComponent), MockService(MyService), etc. Useful for isolating a unit under test from its dependencies. Plays well with TestBed. Create a reactive form using FormGroup and FormControl:

this.myForm = new FormGroup({
  name: new FormControl('', Validators.required),
  email: new FormControl('', [Validators.required, Validators.email])
});

Bind it in the template with [formGroup]="myForm" and formControlName="name". untracked() lets you read signals without creating a dependency:

effect(() => {
  const id = untracked(() => selectedId());
  fetchData(id);
});

This prevents the effect from re-running when selectedId changes. Useful for reading "current" values inside handlers.

Question 30 Angular Framework

What is Angular CLI?

CDK provides ComponentPortal for portal-based rendering:

const portal = new ComponentPortal(MyComponent);
this.cdkPortalOutlet.attach(portal);

Useful for overlays, dialogs, and dynamic UI patterns. The Angular CLI (ng) is a command-line tool for scaffolding and managing Angular projects. Key commands:

ng new – create a new project
ng generate component/service/module – generate code
ng serve – start a dev server
ng build – build for production
ng test – run unit tests

declarations registers components, directives, and pipes that belong to the current module.
imports brings in other NgModules whose exported classes are needed by templates in this module. For example, importing FormsModule to use ngModel. RouterModule.forRoot(routes) is used once in the root module to configure the router with the main routes and register the Router service.
RouterModule.forChild(routes) is used in feature modules to register additional routes without re-providing the Router service. Using forRoot more than once causes unexpected behavior.

Question 31 Angular Framework

What is the difference between ActivatedRoute snapshot and Observable?

JIT (Just-in-Time): compiles templates in the browser. Slower, larger bundles, used in dev mode by default.
AOT (Ahead-of-Time): compiles templates at build time. Default for production (ng build). Smaller bundles, faster startup, catches template errors earlier.

Angular Universal / SSR also uses AOT. forwardRef(() => SomeClass) resolves a class reference later, allowing you to reference a class that is not yet defined at the point of use:
constructor(@Inject(forwardRef(() => MyService)) svc: MyService) {}
Common when classes reference each other (e.g., parent/child components in the same file). route.snapshot returns the value at the moment of access, and does not update if the route changes without component recreation (e.g., navigating from /user/1 to /user/2 with runGuardsAndResolvers: 'paramsChange').
route.params is an Observable that emits on every change. Prefer Observables (or route.paramMap) when the component reuses across param values. provideRouter(routes, withComponentInputBinding(), withViewTransitions()) is the standalone-friendly provider for routing. It replaces RouterModule.forRoot() and accepts feature functions like:

withComponentInputBinding() – binds route params to @Input()
withViewTransitions() – enables View Transitions API
withInMemoryScrolling() – scroll restoration
withHashLocation() – hash-based routing

It avoids NgModule boilerplate.

Question 32 Angular Framework

What is the difference between Observable and Promise?

A Resolver is a service implementing Resolve<T> that pre-fetches data before a route is activated. The resolved data is available via ActivatedRoute.data. This ensures the component has its required data before rendering, avoiding empty states or loading indicators on initial display. @Output() marks a property as an event emitter that sends data from a child to a parent component:
Child: @Output() notify = new EventEmitter<string>();
Child method: this.notify.emit('Hello');
Parent template: <app-child (notify)="onNotify($event)"></app-child> Create a reactive form using FormGroup and FormControl:

this.myForm = new FormGroup({
  name: new FormControl('', Validators.required),
  email: new FormControl('', [Validators.required, Validators.email])
});

Bind it in the template with [formGroup]="myForm" and formControlName="name". Key differences:

Observable emits multiple values over time; Promise resolves once
Observable is lazy (executes on subscribe); Promise is eager (executes immediately)
Observable is cancellable via unsubscribe(); Promise is not
Observable supports operators like map, filter, switchMap

Question 33 Angular Framework

What are Angular CLI builders and schematics?

Builders: run tasks like build, test, lint. Configured in angular.json
Schematics: generate or transform code. ng generate component invokes a schematic

Custom builders/schematics enable repeatable automation in monorepos. Provider configuration options:

useValue – provides a literal value: { provide: TOKEN, useValue: 42 }
useClass – provides an instance of a class: { provide: Logger, useClass: ConsoleLogger }
useFactory – uses a function to create the value: { provide: SERVICE, useFactory: () => new Service(inject(HttpClient)) }
useExisting – aliases an existing token: { provide: NewLogger, useExisting: OldLogger }

Cross-field validators receive the full AbstractControl (typically a FormGroup) and validate across fields:

const matchValidator: ValidatorFn = (g: AbstractControl) =>
  g.get('password')?.value === g.get('confirm')?.value ? null : { mismatch: true };
this.form = this.fb.group({...}, { validators: [matchValidator] });

ngOnDestroy() is called just before Angular destroys the component. It is used for cleanup tasks such as:

Unsubscribing from Observables
Detaching event handlers
Stopping timers with clearInterval()

This prevents memory leaks.

Question 34 Angular Framework

What are typed responses and the observe option in HttpClient?

JIT (Just-in-Time): compiles templates in the browser. Slower, larger bundles, used in dev mode by default.
AOT (Ahead-of-Time): compiles templates at build time. Default for production (ng build). Smaller bundles, faster startup, catches template errors earlier.

Angular Universal / SSR also uses AOT. TestBed is the primary Angular testing utility that creates a testing module:

await TestBed.configureTestingModule({
  imports: [MyComponent],
  providers: [{ provide: MyService, useValue: stub }]
}).compileComponents();
const fixture = TestBed.createComponent(MyComponent);

detach() removes a component from the CD tree; reattach() re-adds it. Useful for fully manual control:

this.cdr.detach();
// later
this.cdr.reattach();
this.cdr.detectChanges();

Combined with OnPush this gives precise control but is rarely needed in signal-based apps. HttpClient methods accept a generic type and an observe option:

observe: 'body' (default) – return body
observe: 'response' – return full HttpResponse with headers/status
observe: 'events' – return HttpEvent for progress

Example:
this.http.get<User>('/api/user/1', { observe: 'response' })

Question 35 Angular Framework

What is a query signal (viewChild / contentChild)?

Angular 17.2+ adds signal-based query decorators:

readonly header = viewChild<ElementRef>('hdr');
readonly projected = contentChild<MyComponent>(MyComponent);

They return Signals and integrate with effect(). Signal queries are push-based — they emit when the queried element appears, unlike the old @ViewChild static fields. params returns a { [key: string]: any } object with string keys.
paramMap returns a ParamMap with strongly typed get() and getAll() methods and a keys array. Prefer paramMap for type safety and clarity:
this.route.paramMap.subscribe(p => this.id = p.get('id')); The Angular CLI (ng) is a command-line tool for scaffolding and managing Angular projects. Key commands:

ng new – create a new project
ng generate component/service/module – generate code
ng serve – start a dev server
ng build – build for production
ng test – run unit tests

This dev-mode error means that during change detection, a binding's value changed after Angular read it. Common causes:

Updating @Input()-bound data in ngAfterViewInit
Updating a parent's bound value during child's CD

Fix with deferred update (setTimeout, Promise.resolve().then()) or ngAfterViewChecked with a flag.

Question 36 Angular Framework

What is the model() input transform pattern?

FormArray manages a dynamic list of FormControls or FormGroups:

this.addresses = this.fb.array([this.fb.group({...})]);
this.addresses.push(this.fb.group({...}));
this.addresses.removeAt(i);

Use for repeating form sections whose count changes. model() accepts an alias option:
readonly value = model(0, { alias: 'count' });
This supports custom two-way binding names while keeping internal property semantics.

HttpParams – URL query parameters, immutable; use .set() and .append() returning new instances
HttpHeaders – HTTP headers, immutable; .set() returns a new instance

Common pitfall: mutating a local variable doesn't affect the request — you must reassign or chain. provideEnvironmentInitializer(() => { ... }) runs after providers are configured but before bootstrap. Useful to register side effects (logging, telemetry, registering providers dynamically). Returns nothing.

Question 37 Angular Framework

What is ng add?

:host in component CSS targets the component's host element itself:
:host { display: block; }
Modifiers: :host(.active), :host-context(.dark) (matches an ancestor). Useful for layout primitives and theme-aware components. A multi-provider allows multiple values to be associated with a single token. Use multi: true:
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
Angular collects all such providers into an array. Built-in examples include HTTP_INTERCEPTORS, ROUTER_CONFIGURATION_EXTRA, NG_VALIDATORS, and NG_VALUE_ACCESSOR. ng add <package> installs a package and runs its add schematic to set up the project. Example: ng add @angular/material installs Material and adds the theme to styles.css. Cross-field validators receive the full AbstractControl (typically a FormGroup) and validate across fields:

const matchValidator: ValidatorFn = (g: AbstractControl) =>
  g.get('password')?.value === g.get('confirm')?.value ? null : { mismatch: true };
this.form = this.fb.group({...}, { validators: [matchValidator] });

Question 38 Angular Framework

What is withInterceptors() in standalone HttpClient?

output() supports aliases:
readonly click = output<void>({ alias: 'onClick' });
Bind via the alias: <app-x (onClick)="handle()">. Same pattern as input alias — separates internal vs external API. NavigationExtras configure router.navigate:

queryParams – { page: 2 }
queryParamsHandling – 'merge' or 'preserve'
fragment – e.g., 'section-1'
state – arbitrary data available via history.state
replaceUrl – replaces current history entry
relativeTo – relative navigation base

Example: router.navigate(['users'], { queryParams: { page: 2 } }); DomSanitizer marks untrusted HTML/URLs/styles as safe for Angular to render without stripping:
this.trustedHtml = this.sanitizer.bypassSecurityTrustHtml(value);
Available: bypassSecurityTrustHtml, Script, Style, Url, ResourceUrl. Avoid bypassSecurityTrustHtml on user input — prefer [innerHTML] with sanitization, which is the safe default. provideHttpClient(withInterceptors([authInterceptor, loggingInterceptor])) replaces the HTTP_INTERCEPTORS-based approach. Interceptors are now simple functions:

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).token();
  return next(req.clone({ setHeaders: { Authorization: 'Bearer ' + token }}));
}

This is the canonical modern pattern.

Question 39 Angular Framework

What is FormArray used for?

output() is the signal-era equivalent of @Output():

readonly saved = output<User>();
this.saved.emit(user);

Consumers bind with (saved)="onSaved($event)". Cleaner than EventEmitter and tree-shakable.

JIT (Just-in-Time): compiles templates in the browser. Slower, larger bundles, used in dev mode by default.
AOT (Ahead-of-Time): compiles templates at build time. Default for production (ng build). Smaller bundles, faster startup, catches template errors earlier.

Angular Universal / SSR also uses AOT. FormArray manages a dynamic list of FormControls or FormGroups:

this.addresses = this.fb.array([this.fb.group({...})]);
this.addresses.push(this.fb.group({...}));
this.addresses.removeAt(i);

Use for repeating form sections whose count changes. @HostBinding binds a host element property/class/style to a component property:

@HostBinding('class.active') isActive = false;
@HostBinding('attr.role') role = 'button';

Equivalent to declaring host: { '[class.active]': 'isActive' } in @Component.

Question 40 Angular Framework

What is the difference between declarations and imports in @NgModule?

Create a class decorated with @Directive({ selector: '[appHighlight]' }):

@Directive({ selector: '[appHighlight]' })
export class HighlightDirective {
  @HostListener('mouseenter') onMouseEnter() {
    this.el.nativeElement.style.backgroundColor = 'yellow';
  }
  constructor(private el: ElementRef) {}
}

HttpClient methods accept a generic type and an observe option:

observe: 'body' (default) – return body
observe: 'response' – return full HttpResponse with headers/status
observe: 'events' – return HttpEvent for progress

Example:
this.http.get<User>('/api/user/1', { observe: 'response' }) declarations registers components, directives, and pipes that belong to the current module.
imports brings in other NgModules whose exported classes are needed by templates in this module. For example, importing FormsModule to use ngModel. Common RxJS operators:

map – transforms emitted values
filter – filters emissions by condition
switchMap – switches to a new inner Observable, cancelling the previous
mergeMap – maps to inner Observable, subscribes concurrently
tap – performs side effects without modifying the stream
catchError – handles errors in the stream

Question 41 Angular Framework

What are viewProviders vs providers?

An NgModule is a class decorated with @NgModule() that organizes related code into cohesive blocks. Key metadata properties:

declarations – components, directives, pipes
imports – other modules needed
providers – services
bootstrap – root component

RouteReuseStrategy controls whether Angular destroys or reuses a component when navigating away and back. The default destroys it. Custom strategies enable tab-like persistence:

@Injectable()
export class CustomReuseStrategy extends RouteReuseStrategy {
  shouldReuseRoute() { return false; }
  store() { /* save detached handle */ }
  retrieve() { return null; }
}

Provide with { provide: RouteReuseStrategy, useClass: CustomReuseStrategy }. Change detection is Angular's mechanism for keeping the view in sync with the component's data. By default, Angular uses a zone-based strategy that checks all components from root to leaves on every event. You can optimize with ChangeDetectionStrategy.OnPush, which only checks when @Input() references change or events are triggered. providers is visible to the component and its content children (projected content).
viewProviders is visible only to the component's own view (template + view children), not to projected content.
Use viewProviders when a service must not leak into content that the parent may project in.

Question 42 Angular Framework

What is a hierarchical injector in Angular?

@let declares a local template variable scoped to the surrounding block:

@let discounted = price() * 0.9;
{{ discounted }}

It supports arbitrary expressions, is reactive (re-evaluates when signals it reads change), and cannot be reassigned. Useful for computed display values without a computed() in the component class. ng add <package> installs a package and runs its add schematic to set up the project. Example: ng add @angular/material installs Material and adds the theme to styles.css. Angular has a tree of injectors parallel to the component tree. When a component lists a provider in providers: [], that provider creates a new injector for that component and its descendants. Services not provided there resolve up the tree. This enables scoped instances, e.g., one UserService per feature module. shareReplay({ bufferSize: 1, refCount: true }) multicasts an Observable and replays the latest value to new subscribers. Common for caching HTTP results:
this.users$ = this.http.get<User[]>('/api/users').pipe(shareReplay(1));
Avoid memory leaks by setting refCount: true and unsubscribing when no consumers remain.

Question 43 Angular Framework

What is ngOnDestroy used for?

bootstrapApplication(AppComponent, appConfig) replaces the @NgModule-based bootstrapModule() flow for standalone apps:

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideHttpClient(withInterceptors([authInterceptor]))
  ]
});

It is the standard bootstrap for fully standalone Angular 17+ apps. RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using Observables. Angular relies heavily on RxJS for:

HTTP requests via HttpClient
Reactive forms value changes
Router events
Event handling

Key concepts include Observable, Observer, Subject, and operators. Common RxJS operators:

map – transforms emitted values
filter – filters emissions by condition
switchMap – switches to a new inner Observable, cancelling the previous
mergeMap – maps to inner Observable, subscribes concurrently
tap – performs side effects without modifying the stream
catchError – handles errors in the stream

ngOnDestroy() is called just before Angular destroys the component. It is used for cleanup tasks such as:

Unsubscribing from Observables
Detaching event handlers
Stopping timers with clearInterval()

This prevents memory leaks.

Question 44 Angular Framework

What is the difference between the global and platform browser providers?

The constructor runs when Angular instantiates the class — inputs are not yet set
ngOnInit runs after the first ngOnChanges — inputs are set, change detection has run once

Use constructor for DI and minimal setup; use ngOnInit for fetching initial data and initialization that depends on inputs. ComponentHarness (from @angular/cdk/testing) provides a stable, abstracted testing API:

class MyHarness extends ComponentHarness {
  static hostSelector = 'app-my';
  getButton = this.locatorFor('button');
  async click() { await (await this.getButton()).click(); }
}

Tests use harnesses instead of querying DOM directly — they survive markup changes.

platformBrowser() – registers browser platform services
Modern: provideBrowserGlobalErrorListeners(), provideBrowserGlobalErrorListeners()

These are usually handled by bootstrapApplication() automatically. ElementRef.nativeElement bypasses Angular's view layer and breaks SSR/hydration. Renderer2 (inject or via @Directive) abstracts DOM operations:
this.renderer.setStyle(el, 'color', 'red');
Use Renderer2 for cross-platform rendering, Web Worker support, and security.

Question 45 Angular Framework

Why does @for require a track expression?

Routes are defined as an array of Route objects:

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'users/:id', component: UserComponent },
  { path: '**', component: NotFoundComponent }
];

The ** wildcard handles unmatched routes. @for requires a track expression to identify items uniquely across renders:
@for (user of users; track user.id) { ... }
Without track, Angular throws a compile-time error. A good track function avoids unnecessary DOM re-creation, mirroring trackBy in *ngFor.

<ng-container> – non-rendering host for structural directives
<ng-template> – defines a template, inert until instantiated
<ng-content> – projects parent content into a child component's view

These three are easy to confuse; remember: container is grouping, template is deferred, content is projection. A multi-provider allows multiple values to be associated with a single token. Use multi: true:
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
Angular collects all such providers into an array. Built-in examples include HTTP_INTERCEPTORS, ROUTER_CONFIGURATION_EXTRA, NG_VALIDATORS, and NG_VALUE_ACCESSOR.

Question 46 Angular Framework

What is bootstrapApplication in Angular?

ViewEncapsulation controls whether component styles leak out or are scoped:

Emulated (default) – adds attribute selectors to scope styles
None – global styles, no scoping
ShadowDom – uses native Shadow DOM (requires browser support)

Set via @Component({ encapsulation: ViewEncapsulation.None }). @for requires a track expression to identify items uniquely across renders:
@for (user of users; track user.id) { ... }
Without track, Angular throws a compile-time error. A good track function avoids unnecessary DOM re-creation, mirroring trackBy in *ngFor. bootstrapApplication(AppComponent, appConfig) replaces the @NgModule-based bootstrapModule() flow for standalone apps:

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideHttpClient(withInterceptors([authInterceptor]))
  ]
});

It is the standard bootstrap for fully standalone Angular 17+ apps. Directives are classes that add behavior to elements in the DOM. There are three types:

Component directives – directives with a template (components)
Structural directives – change DOM layout (e.g., *ngIf, *ngFor)
Attribute directives – change appearance or behavior (e.g., ngClass, ngStyle)

Question 47 Angular Framework

What are Angular lifecycle hooks?

A component is the fundamental building block of an Angular application. It consists of:

A TypeScript class decorated with @Component()
An HTML template
Optional CSS styles
Metadata such as selector, templateUrl, and styleUrls

Lifecycle hooks are methods that Angular calls at specific moments in a component's life. Key hooks in order:

ngOnChanges() – input property changes
ngOnInit() – after first ngOnChanges
ngDoCheck() – custom change detection
ngAfterViewInit() – after view initializes
ngOnDestroy() – before component is destroyed

routerLink is the directive selector (used in templates):
<a routerLink="/users" routerLinkActive="active">Users</a>
routerLinkActive adds a CSS class when the link is active. routerLink accepts strings, arrays, or UrlTree instances. NavigationExtras configure router.navigate:

queryParams – { page: 2 }
queryParamsHandling – 'merge' or 'preserve'
fragment – e.g., 'section-1'
state – arbitrary data available via history.state
replaceUrl – replaces current history entry
relativeTo – relative navigation base

Example: router.navigate(['users'], { queryParams: { page: 2 } });

Question 48 Angular Framework

What are the types of HttpParams and HttpHeaders?

ElementRef.nativeElement bypasses Angular's view layer and breaks SSR/hydration. Renderer2 (inject or via @Directive) abstracts DOM operations:
this.renderer.setStyle(el, 'color', 'red');
Use Renderer2 for cross-platform rendering, Web Worker support, and security. Use ViewContainerRef.createComponent() to mount components at runtime:
this.vcr.createComponent(MyComponent);
For dynamic type:
this.vcr.createComponent(await import('./lazy.component').then(m => m.LazyComponent));
Used in dialogs, modals, dashboards.

HttpParams – URL query parameters, immutable; use .set() and .append() returning new instances
HttpHeaders – HTTP headers, immutable; .set() returns a new instance

Common pitfall: mutating a local variable doesn't affect the request — you must reassign or chain. Angular 17.2+ adds signal-based query decorators:

readonly header = viewChild<ElementRef>('hdr');
readonly projected = contentChild<MyComponent>(MyComponent);

They return Signals and integrate with effect(). Signal queries are push-based — they emit when the queried element appears, unlike the old @ViewChild static fields.

Question 49 Angular Framework

What is the Angular Router's ActivatedRoute?

ngTemplateOutlet renders an ng-template by reference:
<ng-container *ngTemplateOutlet="tpl; context: { $implicit: item, index: i }"></ng-container>
Inside the template, use let-item (implicit) and let-i="index". Great for reusable cell renderers in tables. Angular 19+ adds incremental hydration — defer server-side rendering of specific template blocks until needed:
@defer (hydrate on viewport) { <heavy-component /> }
Reduces SSR cost and improves TTFB while keeping interactivity. ActivatedRoute is an injectable service that provides information about the current route:

params – Observable of route parameters
queryParams – Observable of query parameters
data – Observable of resolved data
snapshot – non-Observable static snapshot

Usage: this.route.params.subscribe(p => this.id = p['id']); Router emits events during navigation:

NavigationStart
RouteConfigLoadStart / RouteConfigLoadEnd
RoutesRecognized
GuardsCheckStart / GuardsCheckEnd
ResolveStart / ResolveEnd
NavigationEnd
NavigationCancel, NavigationError

Listen via router.events for loading indicators or analytics.

Question 50 Angular Framework

What is ng-container vs ng-template vs ng-content?

<ng-container> – non-rendering host for structural directives
<ng-template> – defines a template, inert until instantiated
<ng-content> – projects parent content into a child component's view

These three are easy to confuse; remember: container is grouping, template is deferred, content is projection. A multi-provider allows multiple values to be associated with a single token. Use multi: true:
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
Angular collects all such providers into an array. Built-in examples include HTTP_INTERCEPTORS, ROUTER_CONFIGURATION_EXTRA, NG_VALIDATORS, and NG_VALUE_ACCESSOR. ElementRef.nativeElement bypasses Angular's view layer and breaks SSR/hydration. Renderer2 (inject or via @Directive) abstracts DOM operations:
this.renderer.setStyle(el, 'color', 'red');
Use Renderer2 for cross-platform rendering, Web Worker support, and security. Modifier decorators control where Angular looks for a dependency:

@Self() – only the current injector
@SkipSelf() – start search from parent injector
@Optional() – inject null instead of throwing if not found
@Host() – stop search at the host component

Example:
constructor(@SkipSelf() @Optional() private parent: ParentService) {}