Storybook With Angular

Have you heard about the Storybook?

Let me explain what is Storybook. A storybook is a tool for UI development. It makes development faster and easier. Storybook will provide us with a user-friendly interface for the developer of the component which has been created with the configuration options. Also, the storybook helps to visualize the component in different devices and themes. Storybook helps us document components for reuse and automatically visually test your components to prevent bugs. Once your component is ready you can create a storybook file with the configuration options available for the user. Storybook provides different configurations to update the component based on the developer's need as well as he can copy the component code from the documentation.

Installing Storybook In angular

Installing Storybook to an Angular project is simple and easy we just need to run this command. npx sb init. On our package.json we can see that some scripts have been added. Note: I have updated the script default script may vary. To run Storybook locally, we can just run the command npm run storybook.  

We just have to create components in the angular application and we have to add the appropriate inputs which we need as a configuration parameter. Then we have to create a story for the component. We can create multiple stories in the project. In each story, we have to bind the component, and then we have to create a template. After creating the template object we have to bind that to a story and we need to pass arguments to that story. Please refer to the button story

What is the story? 

A story captures the rendered state of a UI component. We can write multiple stories per component that describe all the “interesting” states.

Sample Code

https://github.com/harshal77/storybook-web-components/tree/development