mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-08 11:11:53 +08:00
70 lines
2.0 KiB
Plaintext
70 lines
2.0 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.
|
|
|
|
## Automatic Compodoc setup
|
|
|
|
During `sb init`, you will be asked, whether you want to setup Compodoc for your project. Just answer the question with Yes. Compodoc is then ready to use!
|
|
|
|
## Manual Compodoc setup
|
|
|
|
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 `projects.<project>.architect.<storybook|build-storybook>` in the `angular.json` creates a metadata file `./documentation.json` each time you run storybook:
|
|
|
|
```jsonc
|
|
// angular.json
|
|
{
|
|
"projects": {
|
|
"your-project": {
|
|
"architect": {
|
|
"storybook": {
|
|
...,
|
|
"compodoc": true,
|
|
"compodocArgs": [
|
|
"-e",
|
|
"json",
|
|
"-d",
|
|
"." // the root folder of your project
|
|
],
|
|
},
|
|
"build-storybook": {
|
|
...,
|
|
"compodoc": true,
|
|
"compodocArgs": [
|
|
"-e",
|
|
"json",
|
|
"-d",
|
|
"." // the root folder of your project
|
|
],
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
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.
|