Angular Storybook Material Dialog

Question

I am trying to use Angular with Storybook and open a mat Dialog box using a button knob.

import { YesNoBoxComponent } from './yes-no-box.component';
import { withKnobs, button } from '@storybook/addon-knobs';
import { moduleMetadata } from '@storybook/angular';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';

export default {
  title: 'YesNoBoxComponent',
  decorators: [
    withKnobs,
    moduleMetadata({
      imports: [MatDialogModule],
    })
  ],
};

export const Card = () => ({
  component: YesNoBoxComponent,
  props: {
    open: button('Has Close Button', () => {
      
      const dialogRef = this.dialog.open(YesNoBoxComponent, {
        width: '250px',
      });
    })
  },
});

I need to add constructor(public dialog: MatDialog) {} But I have no clue where to put the constructor in. I have attempted to create a new instance of the entire component in the knob call back, but no luck. Any ideas?

Answer 1

Unsure how important the knob part is.

This is a way that worked for me, although I'm not as familiar with Storybook as some people out there.

I created a dummy component there in my story. One can obviously extract to some place to reuse it in some way. And the LaunchComponent is the component I then use in Storybook.

Take note: MaterialProviders and PromptDialogComponent are inhouse module and components.

@Component({
  template: `
    <button mat-flat-button (click)="launch()"> Launch </button>`
})
class LaunchComponent {
  constructor(private _dialog: MatDialog) {}

  public launch(): void {
    this._dialog.open(PromptDialogComponent);
  }
}

export const primary = () => ({
  moduleMetadata: {
    imports: [BrowserAnimationsModule, MatDialogModule, MaterialProviderModule],
    declarations: [LaunchComponent]
  },
  component: LaunchComponent
});

Launch button

Modal