Back to notes

Essays

I want Angular components to speak the language of the product

A component API should read like the product decision it represents, not like a bag of styling switches.

AngularComponent APIsDesign Systems

The Angular components I trust are the ones that sound like the product. They do not ask the parent to micromanage internal details. They expose words a product manager, designer, and engineer can argue about together: selected, unavailable, pending review, destructive, empty, ready to submit.

When a component API is mostly visual flags, the parent becomes responsible for a behavior it should not own. That is how a simple card turns into ten booleans and one template becomes a negotiation between layout, state, permissions, and product copy.

I prefer components that have a point of view. A review panel should understand review states. A workflow footer should understand whether the next action is allowed. A status summary should understand which states deserve attention. That does not mean making components huge. It means giving each component a real responsibility instead of asking every parent to recreate the same rules.

Angular is good at this style of work when the team lets it be. Inputs can describe product states. Templates can read like decisions. Signals and computed values can keep derived UI logic close to the feature. The framework gives us enough structure to make intent clear without forcing everything into a global abstraction.

The design system benefits too. A design system is not a museum of rectangles. It is delivery infrastructure. The components should carry the product's grammar so teams can build faster without inventing slightly different behavior in every feature branch.

My rule of thumb is blunt: if I cannot explain a component's public API without naming CSS, DOM structure, or implementation trivia, the API is probably not done.

Good component design makes the interface easier to change because the code is already using the same nouns as the product.