Let's create style guide for Angular Material componets! ๐ŸŽจ

Hello, Am Udhay (OO-dhy)


  • Hello Storybook! ๐Ÿ‘‹
  • Setup Storybook ๐Ÿ”ง
  • Run Storybook ๐Ÿ
  • Add Stories ๐ŸŽจ
  • Storybook Addons ๐Ÿงฑ
  • Publish Storybook ๐ŸŒŽ
  • Discussion (Q/A) ๐ŸŽ™๏ธ

Hello Storybook! ๐Ÿ‘‹

  • Storybook is an open source tool for developing UI components in isolation for React, Vue, Angular, and more.
  • It makes building stunning UIs organized and efficient.
  • It helps to develop Style guide (Minimal version of Design systems).
  • Build component in isolation.
    • Create components without individual screens, backend data, or build business logic.
    • Once you are satisfied with component design, ship it for screen development.

Hello Storybook! ๐Ÿ‘‹ (Contd..)

  • Document use cases as stories. For ex: Button component can have multiple use cases like Primary, Secondary and Tertiary, With icon, Without icon and more.
  • Unit test individual component for better quality.

Trusted by:

Setup Storybook๐Ÿ”ง

  • Create new Angular project.
  • Add Storybook to the Angular project just created.
# Create new Angular project
ng new storybook-ng-material

# Add Storybook to the Angular project
npx sb init

Setup Storybook๐Ÿ”ง (Contd..)

  • Storbook added default configuration and stories.
  • We are all set to begin with Storybook!

Run Storybook ๐Ÿ

Okay, it's time to run Storybook and see how it looks!

npm run storybook

Dive into Stories! ๐Ÿคฟ

What is a Story?


A story captures the rendered state of a UI component. Developers write multiple stories per component that describe all the โ€œinterestingโ€ states a component can support.


For ex: Button with multiple states like Active, Disabled etc.,

Create Image Component


ng g c image

Let's create a simple Image component to play around different attributes of it in terms of Stories..

Create Image Component (Contd..)


import { Component, Input, OnInit } from '@angular/core';

  selector: 'app-image',
  templateUrl: './image.component.html',
  styleUrls: ['./image.component.css'],
export class ImageComponent implements OnInit {
  imgSrc: string = '<UPDATE IMAGE URL>'; //Make sure you add your image URL

  altTxt?: string = 'Pondicherry French Hotel';

  figCaptionTxt?: string =
    'The French Quarter or White Town area in Pondicherry is filled with elegant colonial mansions in the midst of tree-lined boulevards, named on French streets beginning with "rue", numerous parks and charming cafรฉs.';

  imgOpacity?: number = 1;

  constructor() {}

  ngOnInit(): void {}


Create Image Component (Contd..)


    [ngStyle]="{ opacity: imgOpacity }"
    src="{{ imgSrc }}"
    alt="{{ altTxt }}"
    style="width: 100%;"
  <figcaption *ngIf="figCaptionTxt && figCaptionTxt.trim().length > 0">
    {{ figCaptionTxt }}


figcaption {
  background-color: #ddd;
  color: #000;
  font-style: italic;
  padding: 5px;
  text-align: center;
  font-size: 18px;


Create Image Component (Contd..)


Create Stories


#Create an Image Stories TypeScript file
cd src/stories
touch Image.stories.ts

Let's create multiple stories to render Image component with caption, without caption, with full opacity and with half opacity..

Create Stories


import { moduleMetadata } from '@storybook/angular';
import { CommonModule } from '@angular/common';
// also exported from '@storybook/angular' if you can deal with breaking changes in 6.1
import { Story, Meta } from '@storybook/angular/types-6-0';

import { ImageComponent } from '../app/image/image.component';

export default {
  title: 'Example/Image Component',
  component: ImageComponent,
} as Meta;

const Template: Story<ImageComponent> = (args: ImageComponent) => ({
  component: ImageComponent,
  props: args,

export const NoImageCaption = Template.bind({});
NoImageCaption.args = {
  figCaptionTxt: '',

export const WithImageCaption = Template.bind({});
WithImageCaption.args = {
  figCaptionTxt:  'The French Quarter or White Town area in Pondicherry is filled with elegant colonial mansions in the midst of tree-lined boulevards, named on French streets beginning with "rue", numerous parks and charming cafรฉs.'

export const WithZeroOpacity = Template.bind({});
WithZeroOpacity.args = {
    imgOpacity: 1

export const WithHalfOpacity = Template.bind({});
WithHalfOpacity.args = {
    imgOpacity: 0.5

Storybook Addons


Storybook addons enable advanced functionality and unlock new workflows. Contributed by core maintainers and the amazing developer community.


  • Docs
  • Controls
  • Actions
  • Viewport
  • Backgrounds
  • Toolbars & globals

Publish Storybook


Build static site and publish it to your favorite hosting service.

  • GitHub pages
  • GitLab pages
  • Google Cloud Storage
  • Firebase
  • AWS S3
  • Chromatic
#Build storybook static site
npm run build-storybook
cd storybook-static
#To run locally
#Deploy to GitHub Pages
npm run deploy-storybook


Code -ย 

Demo -ย 

Checkout my previous

Useful links