Write documentation: How to use (Angular) components in mdx files

[MickL]

Is your feature request related to a problem? Please describe
The docs are not very clear on how to use/place Angular components inside of a mdx file. IMO the docs are the biggest flaw of Storybook at the moment and took me hours and hours and a lot of frustration already. I often end up figuring things out by accident.

The mdx documentation is even for React, not Angular? https://storybook.js.org/docs/angular/writing-docs/mdx
On the other hand (randomly again!) I found that here is a Angular documentation: https://github.com/storybookjs/storybook/tree/master/addons/docs/angular But why is that not part of the actual Angular docs?

I would like to have a Story that is generated by a mdx file that contains multiple components, e.g. here I have 3 components:

<h1>Buttons</h1>

<app-button>
  Hello world <app-icon icon="magic-hat"></app-icon>
</app-button>

<app-badge title="I am a badge component"></app-badge>

That is not really documented. First I tried to put in just one component:

<Meta title="Pages/" component={ButtonComponent} />

<app-badge title="I am a badge"></app-badge>

or is it?

<Meta title="Pages/" component={ButtonComponent} />

<BadgeComponent title="I am a badge" />

If I guess the documentation right it is the second approach but my component also depends on other services / a shared module. If I read the docs right importing it can be done like in ts files:

<Meta title="Pages/" component={ButtonComponent} decorators={[moduleMetadata({imports: [BrowserAnimationsModule, SharedModule]})]}/>

But then I get:

Promise rejection: Class constructor IconComponent cannot be invoked without 'new' ; Zone: ; Task: Promise.then ; Value: TypeError: Class constructor IconComponent cannot be invoked without 'new'

Found randomly this documentation that shows something like this for Angular:

<Story name="Storyname">
  {{
    component: BadgeComponent,
    props: {
      title: "I am a badge"
    },
  }}
</Story>

But I dont want a story I just want to place components inside a mdx file. Btw I wonder why the inputs are called props. If I would have never worked with React I would never know that this are the inputs.

If I could get past placing a component in a mdx file my next question would be how to add multiple components as this seems to be no array:

<Meta title="Pages/" component={ButtonComponent} />

Additional context
Other things I struggled with with the documentation:

• <Canvas> is not documented but I was looking exactly for that: Story without a component / just html #13783
• Options that a Canvas has, like isColumn, columns are not documented but I was looking exactly for that
• MDX files lets one write JSX but JSX is not familiar to anyone not using React. In fact there are a lot of super annoying things like you cant have unclosed tags <img src=""> or you cant use some attributes <div class="">. This things should be pointed out when speaking about MDX files, just a sentence like "Watch out: JSX files have some characteristics, find out more about JSX -here-"
• MDX docs have a React example not Angular?