Reuse Scope Drives Angular Component Extraction and Placement

Reuse scope is the single variable that decides both whether a chunk of HTML becomes its own component (the mechanism) and where its files live (the location). Escalation ladder:

Reuse scope	Mechanism	Location
Within one component	ng-template — no new component	inline in that component
Across sibling child components	promote ng-template → Angular component	next to the children, under the same parent
Across components in one feature	Angular component	feature components/ folder, sibling to parent components
Across the whole app	Angular component + explicit public API + own data model	UI module (consumers adapt their payload — see App-Wide UI Components Get a Generic API as Pre-Payment for Library Extraction)

The escalation is monotonic: a chunk climbs the ladder only as its observed reuse widens. You promote when scope crosses a boundary, not in anticipation.

feature/
  parent-a/
    parent-a.component.ts
    child-1/            # tier 2: promoted component lives next to siblings
    child-2/
    shared-bit/         #   reused across child-1 & child-2
  parent-b/
  components/           # tier 3: reused across the feature
    feature-widget/
src/app/ui/             # tier 4: reused app-wide, generic public API
  data-card/

Why couple mechanism to location: a component's folder position encodes its reuse contract. Reading the path tells you the scope at which it may be consumed — no separate documentation of "is this shared?" needed. Placement is the visibility declaration.