CODEWITHSUNDEEP
angularstorybookng-zorro-antdangular-storybook
Sharath Srinivas
Sharath Srinivas

Reputation: 1

How to integrate storybook to antd angular(NG-ZORRO)

I'm trying to integrate the storybook to my angular project which uses and design the library. Storyboook runs fine, but the antd style is not loading in stories. It shows only the default elements. I have googled many possibilities, there are little about and in angular. I know that we have somehow wrap the stories with antd library. Please show me the way. If we have an example already it will be great. Thanks in advance.

Upvotes: 0

Views: 942

Answers (2)

Azizi Yazit
Azizi Yazit

Reputation: 11

you need to add the ngzorro module into metadataModule of storybook. Here is example

export const MyComponentImpl = () => {
  return {
    moduleMetadata: {
      declarations: [MyComponent],
      imports: [
         BrowserModule,
         FormsModule,
         ReactiveFormsModule,
         BrowserAnimationsModule,
         NgZorroModule // the ngzorro modules that you want to use
     ]
    },
    template: `
        <div [ngStyle]="{'width': '100vw'}">

          <my-component></my-component>

        </div>
      `,
    props: {
    },
  };
};

Upvotes: 1

wzhudev
wzhudev

Reputation: 360

When you use ng-zorro-antd in your projects, we would modify your angular.json to import styles file:

{
            "styles": [
              "node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css",
              "src/styles.css"
            ],
}

So if you want to use ng-zorro-antd, you should import style files of the components you used in .story.js files. Such as node_modules/ng-zorro-antd/src/components/select/style/entry.less.

Hope this helps.

Upvotes: 1

Related Questions