Sample questions
Angular Directives PipesDifficulty 1
What does the *ngIf structural directive do when applied to an element?
- aIt hides the element with CSS
display: none but keeps it in the DOM - bIt adds or removes the element (and its subtree) from the DOM based on a boolean expression✓
- cIt clones the element once for every item in an array
- dIt only disables user interaction on the element without changing the DOM
Explanation:*ngIf is a structural directive: when its expression is falsy, Angular removes the element and everything inside it from the DOM entirely (destroying any component instances there); when truthy, it (re)creates them. This is different from just hiding with CSS.
Angular Directives PipesDifficulty 1
What is *ngFor used for in an Angular template?
- aTo conditionally show one element out of several options
- bTo bind a single element's CSS classes dynamically
- cTo repeat a template element once for each item in a collection✓
- dTo lazily load a component only when it scrolls into view
Explanation:ngFor is a structural directive that iterates over a collection (typically an array) and renders one copy of the host element/template for each item, e.g. <li ngFor="let item of items">{{ item }}</li>.
Angular Directives PipesDifficulty 1
What is the general purpose of an Angular pipe like {{ price | currency }}?
- aTo transform a value into a different displayed format inside the template, without changing the underlying data✓
- bTo make an HTTP request to fetch the value from a backend
- cTo validate the value and throw an error if it fails a rule
- dTo permanently mutate the component property it's applied to
Explanation:A pipe takes an input value and returns a transformed value for display — e.g. currency formats a raw number as $1,234.00 — without altering the original property on the component.
Angular Directives PipesDifficulty 1
What does the async pipe do when used as {{ data$ | async }} where data$ is an Observable?
- aIt immediately and synchronously converts the entire observable stream into a plain JavaScript array of all values it will ever emit, blocking template rendering until the observable completes
- bIt deliberately cancels and re-establishes the observable's underlying subscription from scratch on every single change detection cycle that runs while the pipe is present
- cIt only ever works correctly when given a
Promise as input, and throws a runtime type error if an Observable is passed to it instead - dIt subscribes and returns the latest value, unsubscribing automatically on destroy✓
Explanation:The async pipe subscribes to an Observable or Promise for you, displays the latest emitted value, marks the view for check on each emission, and automatically unsubscribes when the host view is destroyed — removing the need for manual subscribe/unsubscribe boilerplate.
Angular Directives PipesDifficulty 1
What is @HostBinding() used for inside an Angular attribute directive?
- aTo listen for a DOM event on the host element
- bTo inject a service into the directive's constructor
- cTo bind a directive class property to a property (e.g. a CSS class, style, or attribute) of the host element✓
- dTo declare the directive's CSS selector
Explanation:@HostBinding('class.active') (for example) ties a directive property to a property of the host element it's applied to — when the directive property changes, Angular updates the corresponding host DOM property/attribute/class automatically.
Angular Directives PipesDifficulty 1
In Angular, what is the key difference between a structural directive and an attribute directive?
- aThere is absolutely no real difference between the two — both terms are simply two different names Angular's documentation uses interchangeably to describe the exact same single underlying directive mechanism
- bA structural directive adds/removes elements (
*ngIf); an attribute directive changes an existing element's look/behavior ([ngClass])✓ - cAttribute directives are restricted so that they can only ever be applied on top of other Angular components, and can never be attached directly to a plain, native HTML element such as a
<div> or <span> - dStructural directives require the class to be decorated with
@Component instead of the usual @Directive decorator that all other kinds of directives use
Explanation:Structural directives (prefixed with ngIf/*ngFor) manipulate the DOM tree's structure by adding or removing elements. Attribute directives (like [ngClass], [ngStyle], or a custom [appHighlight]) modify an existing element's appearance/behavior without changing what's present in the DOM tree.