Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to properly import angular material components into StoryBook CSF

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!

like image 535
Dave Vronay Avatar asked Oct 22 '19 03:10

Dave Vronay


People also ask

Is angular material a library?

To Angular JS developers, Angular Material is a UI component library. Angular Material components support the introduction of visually appealing, consistent, and effective online pages and web applications that adhere to modern web design concepts such as browser mobility, devices autonomy, and gradual degeneration.


Video Answer


1 Answers

I've done it like this

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

export default {
    title: "Task",
    decorators: [
        moduleMetadata({
            imports: [MyModule]
        })
    ]
}
like image 55
Lyle Balcom Avatar answered Oct 18 '22 03:10

Lyle Balcom