How to properly import angular material components into StoryBook CSF

Question

I have a relatively simple angular component that uses angular material components - mat-menu in particular.

When I create my story, I get a runtime error:

    Error: Template parse errors:
Can't bind to 'matMenuTriggerFor' since it isn't a known property of 'button'. ("
        </li>
        <li class="nav-item">
          <button class="menubtn" mat-icon-button [ERROR ->][matMenuTriggerFor]="menu">
            <span class="fa-stack fa-md">
              <i class="fa fa-g"): ng:///DynamicModule/VeradigmHeaderComponent.html@33:50
There is no directive with "exportAs" set to "matMenu" ("
            </span>
          </button>
          <mat-menu [ERROR ->]#menu="matMenu" xPosition="before">
            <button mat-menu-item (click)="setLoc('en_US')">en-US"): ng:///DynamicModule/VeradigmHeaderComponent.html@38:20
'mat-menu' is not a known element:
1. If 'mat-menu' is an Angular component, then verify that it is part of this module.
2. If 'mat-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
            </span>
          </button>

I assume I have to import the MatMenuModule, but I cannot figure out how to do this. Here is my story:

import {TestHeaderComponent} from './test-header.component';
import { MatMenuModule} from '@angular/material';


export default {
    title: 'Test Header',
};

export const TestHeader= () => ({
    component: TestHeaderComponent,
    props: { },
});

TestHeader.story = {
    name: 'default',
    imports: [
        MatMenuModule,
    ],
};

I tried putting the imports in Testheader directly as well but neither one works. If I use the storiesOf API, I can do it like this:

stories.addDecorator(
    moduleMetadata({
        imports: [MatMenuModule],
    })
);

But I don't know the format in CSF. Please help!

Kimikokimitri

Did you import MatMenuModule in your app.module.ts ? – Biotope

It is in the my app module. I can make it work with the storiesOf format using stories.addDecorator(moduleMetadata({imports: [MatMenuModule]})) but I don't know how to do it in CSF. – Kimikokimitri

Answer 1

I've done it like this

import { moduleMetadata } from '@storybook/angular';

export default {
    title: "Task",
    decorators: [
        moduleMetadata({
            imports: [MyModule]
        })
    ]
}

Liegeman

Add the above to your story script. This answer albeit correct does not make this clear. +1. – Behalf