How To Use Storybook with Ionic and Angular
Tags: ionic, angular, storybook, javascript
Published: 2021-03-24 06:18:52


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gn5swk4dwa5zbyzs35fg.png)
>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.

### Overview
Introduction to setting up a using [Storybookjs](https://storybook.js.org/) in an [Ionic Framework Angular](https://ionicframework.com/docs/angular/overview) Project. 

We will create a simple ionic card component that displays content passed in as a parameter and emits custom events for clicking on a button associated with viewing details and another button and custom event for editing.

We show how to uses actions as an add-on in the storybook story. We use the decorators add-on to included the angular modules required for Ionic Framework to function properly with Storybook.

After the story is working, we integrate the component into the main application

>See links for [Ionic VueJS](https://www.youtube.com/watch?v=AMzanfFB0BM) and [Ionic ReactJS](https://www.youtube.com/watch?v=vHJK3OwDZTA)

### Source Code
```
// SimpleItem.stories.ts
import { IonicModule } from '@ionic/angular';
import { moduleMetadata } from '@storybook/angular';
// 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 { SimpleItemComponent } from 'src/app/home/simple-item/simple-item.component';
import { action } from '@storybook/addon-actions';

export default {
  title: 'Ionic/SimpleItemComponent',
  component: SimpleItemComponent,
  argTypes: {},
  decorators: [
    moduleMetadata({
      declarations: [SimpleItemComponent],
      imports: [IonicModule.forRoot()],
    }),
  ],
} as Meta;

const Template: Story<SimpleItemComponent> = (args: SimpleItemComponent) => ({
  component: SimpleItemComponent,
  props: {
    ...args,
    onViewDetails: action('onViewDetails'),
    onEdit: action('onEdit'),
  },
  template: `
  <app-simple-item 
     [item]="item"
     (onViewDetails)="onViewDetails($event)"
     (onEdit)="onEdit($event)" >
  </app-simple-item>`,
});

export const Default = Template.bind({});
Default.args = {
  item: {
    id: 100,
    title: 'Default Title',
    content: 'Simple Item Content',
  },
};

export const LongTitle = Template.bind({});
LongTitle.args = {
  item: {
    id: 100,
    title: 'Default Title - This is really long and should wrap',
    content: 'Simple Item Content',
  },
};

export const LongContent = Template.bind({});
LongContent.args = {
  item: {
    id: 100,
    title: 'Default Title',
    content:
      'Simple Item Content  - This is really long and should wrap - This is really long and should wrap',
  },
};

```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qoy9l2tg19mehoc6gkw6.png)
```
import { Component, Input, OnInit, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-simple-item',
  // templateUrl: './simple-item.component.html',
  styleUrls: ['./simple-item.component.scss'],
  template: 
  `
  <ion-card>
    <ion-card-header>
      <ion-card-title>{{ item.title }}</ion-card-title>
    </ion-card-header>
    <ion-card-content>{{ item.content }}</ion-card-content>
    <div class="ion-float-right" style="margin: 8px; zoom: 0.8;">
      <ion-button (click)="clickedViewDetails(item.id)">VIEW DETAILS</ion-button>
      <ion-button (click)="clickedEdit(item.id)">EDIT</ion-button>
    </div>
  </ion-card>
  `
})
export class SimpleItemComponent implements OnInit {
  @Input() item: any;

  @Output()
  onViewDetails = new EventEmitter<any>();

  @Output()
  onEdit = new EventEmitter<any>();

  constructor() {}

  clickedViewDetails() {
    this.onViewDetails.emit({ itemId: this.item.id });
  }

  clickedEdit() {
    this.onEdit.emit({ itemId: this.item.id });
  }

  ngOnInit() {}
}

```
### Video
{% youtube dVuCFpdmwZQ %}

### Links
- Twitter - https://twitter.com/aaronksaunders
- Facebook - https://www.facebook.com/ClearlyInnovativeInc
- Instagram - https://www.instagram.com/aaronksaunders/
- Dev.to - https://dev.to/aaronksaunders
- 🌐 www.fiwic.com