Implement a scoped slot pattern in a reusable DataList

WHAT THIS TESTS: This question evaluates whether you understand the boundary between component encapsulation and presentation delegation. The interviewer wants to see that you know how to keep data fetching and state management inside a reusable container while still letting the consumer control markup. It also checks cross-framework fluency, specifically whether you can map Vue scoped slots to Angular ng-template and TemplateRef patterns.

A GOOD ANSWER COVERS: First, the core contract: the child component owns the data and the iteration, and the parent owns the visual template. Second, the mechanism in Vue: using a slot element with bound attributes like item or row that become available in the parent scope via v-slot. Third, the Angular equivalent: the child accepts a TemplateRef via ContentChild or an input, then renders it with ngTemplateOutlet while passing context through an object. Fourth, why this beats props for markup: props pass data, but scoped slots pass both data and a rendering target without forcing the child to know about HTML structure.

COMMON WRONG ANSWERS: A major red flag is proposing that the parent runs the loop and passes each item back into the child as a prop; that defeats the purpose of the reusable DataList because the parent now owns pagination, filtering, and keys. Another mistake is claiming that slot content automatically sees child data; in Vue, slots use lexical scope, so without explicit slot props the parent only sees its own scope. In Angular, confusing ng-content with ng-template is also common, since ng-content projects static markup but cannot receive a data context back.

LIKELY FOLLOW-UPS: The interviewer may ask how you would type the slot props in TypeScript, or how to provide fallback content when no slot is supplied. They might also probe performance: whether you should use trackBy inside the DataList loop, or how change detection interacts with projected templates in Angular. Another angle is asking how to support named slots for header and footer regions while keeping the item slot scoped.

ONE CONCRETE EXAMPLE: In Vue, a DataList component fetches users from an API, runs v-for over the array, and renders a slot outlet that binds the user object as a slot prop. The parent consumes it with v-slot and receives the user to render custom markup such as name and email. In Angular, the DataList component accepts a TemplateRef through ContentChild or an input property, iterates over its internal users array, and renders each item via ngTemplateOutlet while passing the user in a context object. The parent supplies an ng-template with let-user to access that context. The child remains agnostic about columns and styling.