Discussion on: Angular - How many components is too many components?

[Antonin J. (they/them)]

It depends on a few things:

1. What's the longevity of the project? Is it a long-term project or a one-off?
2. What's the expected growth of the application? Is this a small application or a big SPA?

At my job, we've been growing an AngularJS app (and subsequently an Angular rewrite/hybrid) and found a ton of use in having a separate input component. Why? Because you might want to tack on additional functionality/logic/styling that you'll want across the site. Eg:

1. What if you want your input to have a help icon that explains the purpose of the input? (eg. a freeform "username" field that explains what the username is for, or what the limitations are)
2. What if you want to optionally pass typeahead hints to your input field? (eg. a free form text field that gives you hints based on previous entries elsewhere)
3. What if you want to add validation across the site? eg. validation that checks for HTML tags

And so on.

In fact, we have a separate component for a dumb input, for an input that features a typeahead as hints, for an input that features typeahead as options, for an input that can only have numbers, and so on.

But would this be helpful on a smaller app? Probably not. Would we have built this out if the longevity of the app was only a few months? Maybe, but it's no guarantee.

[TheSlider2]

In our current project we've got this period component containing two date inputs, start and end. We're using it across the entire project in various situations and sometimes need to declare specific validators for some of the work-flows.
The problem is that this component is starting to require so many conditional validators and each of them is a complex check that we're now asking ourselves if it was a good idea to create it instead of having independent start/end inputs in each parent component with their own validators.

So yeah, it's nice to cut your project into small pieces but when one of your smaller piece starts getting bloated with unnecessary conditional code, then you know you've went too far.

[Antonin J. (they/them)]

Oh yeah! Absolutely. But that's when I'd split it based on functionality. Conditionals usually indicate that you're trying to force one thing to fulfill the role of many.

You can also invert the validation and have the parent be responsible (just like you mentioned).

In Angular, you could just do:

<MyInputComponent
(validate)="validateInput($event)"
[isValid]="isInputValid">
</MyInputComponent>

On change, the input component would emit the change for the validateInput to run and the parent component will then let the input know if it's valid or not. :)