The 6 Best Practices for building Custom Angular Components Library

Tomas Trajan
13 min readJul 20, 2021
System, have a system! (📷 by Dose Juice — 🎨 by Tomas Trajan)

UPDATE (10.08.2021) — Check out Angular Rocks podcast where Aliaksei Kuncevič and I discuss topics presented in this article!

Angular Rocks Episode about best practices for building of custom Angular component libraries!

The Experience

The ideas presented in this article are based on extensive experience from a large enterprise environment (150 Angular SPAs and 30+ libs ) — many of which consume our custom Angular component library!

🤫 Wanna know how we can manage such a large environment without our heads going 🤯

Check out Omniboard, the best tool for lead software engineers and architects that helps them to get an overview to drive change by querying and tracking all their code bases! 🛠

ps: I made it using Angular / Material & NgRx and it served as an inspiration for many of the articles you have read already 😉

☕☕☕☕☕: This article is going to be one of the longer ones so do not hesitate to jump straight to the section which interests you the most based on the issues you’re currently working on!

Table of Content

  1. Have a Plan & Definitely Have a Design System
  2. The Isolation of the Sub-Entries and All The Benefits it Brings!
  3. Complex Data is Always Passed in the Template Never Through @Input-s
  4. Translation Library Independence
  5. State Management Solution Independence
  6. Epic Showcase for Great Developer Experience

Have a Plan & Definitely Have a Design System

As with everything we do, we usually achieve better results when we’re prepared, at least a bit prepared, please! 😅

But then, the life happens, schedules are never perfect and we usually need to be flexible and deliver anyway…

That being said, it is of utmost importance to have a system, especially a design system when taking upon a task of creating a custom component framework for your enterprise organization!

--

--

Tomas Trajan

👋 I build, teach, write & speak about #Angular & #NgRx for enterprises 👨‍💻 Google Developer Expert #GDE 👨‍🏫 @AngularZurich meetup co-organizer