Member-only story

The 6 Best Practices for building Custom Angular Components Library

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

Have a Plan & Definitely Have a Design System

Thank you Thomas! Your articles on Angular libraries are like "the unofficial docs" on the subject! I've tried "deep-diving" into Angular Material's repo, but it seems like the usual guidelines aren't followed there.

Recently I've created an issue on…

Nice article, Tomas!

Are you able to explain in which cases that sub-entries are necessary?

I tried setting up a new project, exporting two modules from a library, and checking if the build of an app tree-shaked correctly when only importing one of…

Good points! And funny enough, we identified a very similiar set in our company. The only point where we differ is the decoupling of the translation solution. Instead of only allowing simple strings to be passed in, we provide an interface that the…

The 6 Best Practices for building Custom Angular Components Library

The Experience

Table of Content

Create an account to read the full story.

Written by Tomas Trajan

Responses (4)

More from Tomas Trajan

Top 10 Angular Architecture Mistakes You Really Want To Avoid

Angular keeps changing for better but the big picture remains the same which makes architecture know-how timeless & worth your time!

The Best Way To Architect Your Angular Libraries

The ideas presented in this article are based on extensive experience from large enterprise environment (100 Angular SPAs and 30+ libs )…

Custom input formatting with simple directives for Angular 2

How to implement custom reusable input formatters with help of Angular 2 directives to enable simple & flexible drop-in usage pattern

The Best Way to build reactive sub-forms with Angular

Learn how to extract repetitive sub-form implementations into standalone, robust and type safe components with Angular reactive forms!

Recommended from Medium

The Principle of Low Coupling in Angular and TypeScript: A Comprehensive Guide with Code Examples

In software development, the principle of Low Coupling emphasizes minimizing the dependencies between components or modules within a…

Stop Using Observables! Angular 19’s Signal-Based Resource API is the Future

Angular 19 has introduced a game-changing feature — the Signal-Based Resource API — which makes managing resources like HTTP requests…

Lists

General Coding Knowledge

Interesting Design Topics

Medium's Huge List of Publications Accepting Submissions

Understanding Angular Modules and Components in Angular 19: A Comprehensive Guide

What Are Angular Modules?

Micro Frontends : How to Display Multiple Angular Apps on a Single Page in Angular Host App

Learn how to modify your Angular shell application to display multiple micro frontends on a single page using Native Federation.

Creating and styling components in Angular correctly

A few simple examples to help you avoid over-complex code, redundant component styles, and non-obvious traps

Meet Angular v19

In the past two years we doubled down on our investment in developer experience and performance — in every single release we’ve been…