CODEWITHSUNDEEP
angularstorybook
elegon
elegon

Reputation: 193

how to write storybook CSF stories with html template in angular

How can I use storybooks new CSF Format to add a component via thml tag? Like so (old storiesOf format):

const modules = {
    imports: [ReactiveFormsModule],
    declarations: [AddressComponent],
};

storiesOf('Core/Address Component - storiesOf', module)
    .add('as component', () => ({
        moduleMetadata: modules,
        component: AddressComponent,
        props: {
            title: 'test',
        },
    }))
    .add('via html tag', () => ({
        moduleMetadata: modules,
        template: `
            <app-address title="test"></app-address>
        `,
    }));

I already tried this (new CSF format):

export default {
    component: AddressComponent,
    title: 'Core/AddressComponent',
    decorators: [
        moduleMetadata({
            // imports both components to allow component composition with storybook
            providers: [],
            schemas: [CUSTOM_ELEMENTS_SCHEMA],
            imports: [ReactiveFormsModule],
        }),
    ],
};
export const fromHtmlTemplate = () => ({
    component: AddressComponent,
    template: `<app-address title="testerasef"></app-address>`,
});

... but result is just an empty page in storybook....

Upvotes: 0

Views: 1622

Answers (1)

elegon
elegon

Reputation: 193

ok, I was just missing this declaration:

export default {
    component: AddressComponent,
    title: 'Core/AddressComponent',
    decorators: [
        moduleMetadata({
            schemas: [CUSTOM_ELEMENTS_SCHEMA],
            declarations: [AddressComponent],
            imports: [ReactiveFormsModule],
        }),
    ],
};
export const fromHtmlTemplate = () => ({
    template: `<app-address title="testerasef"></app-address>`,
});

hope, this helps someone until storybook updates the docs...

Upvotes: 3

Related Questions