All notes

Notes

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.

2 min readAngularComponent 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.

Save thearnab

Your labs, one tap away. Add the app to your home screen to open it straight into the Lab.

In Chrome or Edge, use the install icon in the address bar or the browser’s app menu.

In Safari on a Mac, choose File → Add to Dock. On a phone, open this site in Safari or Chrome and save it to your home screen.

For music without a connection, use Prepare offline in the Songbook while online.