mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 16:11:33 +08:00
43 lines
1.4 KiB
Plaintext
43 lines
1.4 KiB
Plaintext
To use auto-detected controls with Angular, you must fill in the `component` field in your story metadata:
|
|
|
|
```ts
|
|
import { Button } from './button.component';
|
|
|
|
export default {
|
|
title: 'Button',
|
|
component: Button,
|
|
};
|
|
```
|
|
|
|
Storybook uses this to auto-generate the `ArgTypes` for your component using [Compodoc](https://compodoc.app/). It supports `inputs`, `outputs`, `properties`, `methods`, `view/content child/children` as first class prop types.
|
|
|
|
You'll need to register Compodoc's `documentation.json` file in `.storybook/preview.ts`:
|
|
|
|
```js
|
|
import { setCompodocJson } from '@storybook/addon-docs/angular';
|
|
import docJson from '../documentation.json';
|
|
|
|
setCompodocJson(docJson);
|
|
```
|
|
|
|
Finally, to set up compodoc, you'll first need to install Compodoc:
|
|
|
|
```sh
|
|
yarn add -D @compodoc/compodoc
|
|
```
|
|
|
|
Then you'll need to configure Compodoc to generate a `documentation.json` file. Adding the following snippet to your `package.json` creates a metadata file `./documentation.json` each time you run storybook:
|
|
|
|
```json
|
|
{
|
|
...
|
|
"scripts": {
|
|
"docs:json": "compodoc -p ./tsconfig.json -e json -d .",
|
|
"storybook": "npm run docs:json && start-storybook -p 6006 -s src/assets",
|
|
...
|
|
},
|
|
}
|
|
```
|
|
|
|
Unfortunately, it's not currently possible to update this dynamically as you edit your components, but [there's an open issue](https://github.com/storybookjs/storybook/issues/8672) to support this with improvements to Compodoc.
|