Angular Storybook7.3 while writing stories.ts file args showing an error

153 views Asked by At

Recentry we upgraded our Angular Storybook to 7.3 from 6.0. We are getting issue in stories.ts file. while binding propertis to args.

Created a Image component with two propertis "src" and "alt" as below.

image.component.html

<img [src]="src" [alt]="alt">

image.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-image',
  templateUrl: './image.component.html',
  styleUrls: ['./image.component.scss']
})
export class ImageComponent {
/**Used to add image for Component */
@Input() src:string='';
/** Used to display alter text */
@Input() alt:string='';

}

As a angular component if we pass any URL to src in .ts file it is displaying image as expected.

But If we try to pass image through image.stories.ts file property it is not showing in storybook.

image.stories.ts

import { Meta, StoryObj } from "@storybook/angular";
import { ImageComponent } from "src/app/image/image.component";
export default{
    title:'Example/Image',
    component:ImageComponent,
} as Meta;

//we create a templete of how args map to rendering
const Template1=(args:ImageComponent)=>({
component:ImageComponent,
props:args,
});

export const My_Image=Template1.bind({});
My_Image.args={
    src:'../assets/PlantFree.jpg',
    alt:'Plant'
}

When i try to pass arguments to "My_Image" by using args it is showing error.

enter image description here

So in storybook(http://localhost:6006/) it is showing blank page or error as below enter image description here

How to pass component properties in Stories.ts file in my case.

0

There are 0 answers