Building an Angular Component Library (ACL) with Storybook [#11]

Angular supports libraries since version 6, this feature made easier for developers to create and share components across diffenrent applications. A Component Library can be very handy when working on projects where multiple UI applications are build. Having the components documented on a live website makes it even better. These are some benefits we can get from having our UI components documented:

  • Avoid code duplication: Developers will be able to navigate across the UI documentation and find what has already been build and what can be reused.
  • Communication: When your components are documented and shared across teams you can name them. Giving names to your components will make easier communication with your teammates.
  • Decissions: UI Documentation will help on taking decissions regarding new features. You can take decissions such as build new vs reuse.
  • Testing: Developers working on new components will be able to do some testing in isolation when the components are added to Storybook.

Storybook is a tool to document UI components, it will allow us to display our components in a website where all components are listed as "Stories".

Creating a component library with Angular & Storybook

  • Angular 14.2.13
  • Prime NG 13.3
Create an empty workspace

If you are thinking about having multiple applications or libraries in a monorepo you can create an empty workspace where you can add projects and libraries as needed.

ng new design-system --create-application=false
Create a library

Creates an Angular library

cd design-system
ng generate library component-library
Install Storybook

Let's install storybook and verify everythins is working until now.

npx storybook@latest init

Run Storybook

npm run storybook
Adding a component to our libary

Before adding a new component to our library, let's get rid off the component and service the CLI created for us. We will remove the following files:

  • component-library.component.ts
  • component-library.component.spect.ts
  • component-library.service.ts
  • component-library.service.spec.ts
After removing those files, we will have to remove the references to them in the public-api.ts file as well.

Now, we will create a new component using the CLI. Let's run the following command

ng g component button

Last articles

Most read