Rendering Custom Standalone Angular Material Select Components with Storybook

Image by Marcelo Kato from Pixabay

Scenario

We have created a custom standalone Angular Material select component and want to render it with Storybook. When we try we get the error:

ERROR Error: Unexpected synthetic property @transitionMessages found. Please make sure that:
  - Either `BrowserAnimationsModule` or `NoopAnimationsModule` are imported in your application.

And this is because we have to create a non module Provider for the BrowserAnimationsModule , since we can’t import the BrowserAnimationsModule directly.

Approach

Add the provideAnimations function call to the providers array within the decorators section of the Meta declaration for the story. Here’s the short version.

  decorators: [
    applicationConfig({
      providers: [provideAnimations()],
    }),
     moduleMetadata({
      imports: [ElThemeSelectPageComponent],
      declarations: [],
    }),
  ],
};

And this is a full example.

import { Meta, StoryObj, applicationConfig } from '@storybook/angular';
import { moduleMetadata } from '@storybook/angular';
import ElThemeSelectPageComponent from './el-theme-select-page.component';
import { provideAnimations } from '@angular/platform-browser/animations';

const meta: Meta<ElThemeSelectPageComponent> = {
  title: 'Theme Select',
  component: ElThemeSelectPageComponent,
  tags: ['autodocs'],
  render: (args: ElThemeSelectPageComponent) => ({
    props: {
      ...args,
    },
  }),
  decorators: [
    applicationConfig({
      providers: [provideAnimations()],
    }),
     moduleMetadata({
      imports: [ElThemeSelectPageComponent],
      declarations: [],
    }),
  ],
};
export default meta;
type Story = StoryObj<ElThemeSelectPageComponent>;

export const ElThemeSelectPage: Story = {
  args: {
  },
};