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.
So in storybook(http://localhost:6006/) it is showing blank page or error as below

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