The problem: reuse across projects
I created an Angular input-field library for my company so it could be reused across projects. The scope extended beyond building an input on a single screen: the library also needed to work with third-party UI dependencies, validation requirements, and the styles of the application using it.
My role and scope
I built the library and deployed it to an internal CDN for reuse across company projects. I also carried out the research and development around regular expressions, validation, third-party library handling, and styling in relation to the consuming project. The project's stack included Angular, Tailwind CSS, and Taiga UI.
Enforcing two decimal places with regex
One concrete requirement was a numeric field that accepted up to two decimal places. I handled this using regex validation in the application code. For example, 12.3 and 12.34 meet the precision requirement, while 12.345 exceeds it.
The validation did not rely only on restrictions in the HTML input. If someone changed those restrictions through the browser's Inspect tools, the application code still checked the value against the decimal rule. This kept the field's validation logic separate from editable HTML attributes.
This example illustrates why reusable inputs need validation logic alongside their visual design. Taiga UI provided the component design; the application-level regex check enforced this field's precision requirement. This describes frontend validation, not protection against direct API requests: a backend accepting the value must enforce its own rules as well.
Using Taiga UI for component design
We used Taiga UI for the component design. My work included researching how to handle that third-party UI library within our reusable Angular library, alongside the validation requirements and styles of the projects consuming it.
Styling in the consuming project
Taiga UI provided the component design, and I also worked on style handling with respect to the project using the library. Consuming applications had their own styles and layouts, so the work included considering how the shared components' presentation interacted with each project's styling.
Distribution through an internal CDN
I deployed the library to an internal CDN to make it available for reuse across company projects. This was the distribution step connecting the library's development to the applications that needed it.
Use in the NPC calculator
We used the shared library in the NPC calculator described in my portfolio. That project collected student grades and family information to display calculated results and was used across multiple customers.