skip to content

Directives & Pipes

2 roadmaps35 questions

Attribute and structural directives, host bindings, hostDirectives composition, ng-template outlets, and built-in and custom pipes. Interviewers probe microsyntax desugaring and pipe purity.

part ofAngularoverview, primer and where to startread it →
on this pageshow

explore

questions

page 2 of 2

In an Angular template, how does I18nPluralPipe choose the message for an invoice's item count, and what does # do in the mapping?

level: middleimportance: nice to knowfreq 22%

basics

~10 s

I18nPluralPipe looks for an exact '=n' key first, then the locale's plural category such as 'one', then 'other', and throws if none match. In the chosen message each # is replaced by the number.

open as a page

In Angular, how do you inject a service into a custom pipe, which injector resolves it, and how many pipe instances does a template create?

level: middleimportance: nice to knowfreq 25%

basics

~10 s

Call inject() in the pipe class; it resolves from the element injector where the pipe is used, then environment injectors, without the host's viewProviders. Each usage in each view gets its own pipe instance.

open as a page

Since Angular 22, what happens when the same directive appears twice in an element's resolved host directive tree, and when does it still fail?

level: seniorimportance: nice to knowfreq 15%

basics

~20 s

Angular 22 de-duplicates it: duplicate host directive matches merge into one instance with combined mappings, and a template selector match beats host directive matches. It fails with NG8024 when merged paths give one binding different aliases.

open as a page

After an upgrade to Angular 21, `@HostListener('click') onClick(e: MouseEvent)` fails the build with "Expected 1 arguments, but got 0."; what changed, and what is the right fix?

level: seniorimportance: nice to knowfreq 20%

basics

~20 s

Since Angular 21 the typeCheckHostBindings compiler option defaults to true, so host bindings and listeners are type-checked. The method expects an event but the decorator passes none; add ['$event'] to the decorator, or move to the host object.

open as a page

With Angular's NgTemplateOutlet, what happens to the rendered view when the context object changes versus when the template or injector input changes?

level: seniorimportance: nice to knowfreq 24%

basics

~20 s

A new template or injector makes NgTemplateOutlet destroy the embedded view and create a new one, losing child state. A new context object keeps the view: a Proxy forwards reads to whatever object is currently bound.

open as a page

showing 31–35 of 35