# Create new Angular project
ng new storybook
.
.
.

# Add Storybook to the Angular project just created
npx -p @storybook/cli sb init --type angular

ng g c image

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

@Component({
  selector: 'app-image',
  templateUrl: './image.component.html',
  styleUrls: ['./image.component.css'],
})
export class ImageComponent implements OnInit {
  @Input()
  imgSrc: string = '<UPDATE IMAGE URL>'; //Make sure you add your image URL

  @Input()
  altTxt?: string = 'Pondicherry French Hotel';

  @Input()
  figCaptionTxt?: string =
    'The French Quarter or White Town area in Pondicherry is filled with elegant colonial mansions in the midst of tree-lined boulevards, named on French streets beginning with "rue", numerous parks and charming cafés.';

  @Input()
  imgOpacity?: number = 1;

  constructor() {}

  ngOnInit(): void {}
}

<figure>
  <img
    [ngStyle]="{ opacity: imgOpacity }"
    src="{{ imgSrc }}"
    alt="{{ altTxt }}"
    style="width: 100%;"
  />
  <figcaption *ngIf="figCaptionTxt && figCaptionTxt.trim().length > 0">
    {{ figCaptionTxt }}
  </figcaption>
</figure>

figcaption {
  background-color: #ddd;
  color: #000;
  font-style: italic;
  padding: 5px;
  text-align: center;
  font-size: 18px;
}

#Create an Image Stories TypeScript file
cd src/stories
touch Image.stories.ts

import { moduleMetadata } from '@storybook/angular';
import { CommonModule } from '@angular/common';
// also exported from '@storybook/angular' if you can deal with breaking changes in 6.1
import { Story, Meta } from '@storybook/angular/types-6-0';

import { ImageComponent } from '../app/image/image.component';

export default {
  title: 'Example/Image Component',
  component: ImageComponent,
} as Meta;

const Template: Story<ImageComponent> = (args: ImageComponent) => ({
  component: ImageComponent,
  props: args,
});

export const NoImageCaption = Template.bind({});
NoImageCaption.args = {
  figCaptionTxt: '',
};

export const WithImageCaption = Template.bind({});
WithImageCaption.args = {
  figCaptionTxt:  'The French Quarter or White Town area in Pondicherry is filled with elegant colonial mansions in the midst of tree-lined boulevards, named on French streets beginning with "rue", numerous parks and charming cafés.'
};

export const WithZeroOpacity = Template.bind({});
WithZeroOpacity.args = {
    imgOpacity: 1
};

export const WithHalfOpacity = Template.bind({});
WithHalfOpacity.args = {
    imgOpacity: 0.5
};