Preview Image Component Documentation

I'd be glad to create the documentation for the preview image component in Angular, incorporating insights from the provided ratings and addressing potential shortcomings:

Figma Link :- WIP May 2024

Story link :- https://auperator.atlassian.net/browse/SHE-4423

Component Overview

This component displays a preview of a single image or a series of images within a modal dialog. It offers customization options for image selection and display.

Functionality

Image Data Structure:
- Leverages interfaces (imageArrayType and dataTypeModal) to ensure proper data handling.
- imageArrayType: Describes an image with properties for display name (displayName) and image URL (url).
- dataTypeModal: Stores information for previewing images:
  - array: Array of imageArrayType objects, containing image data.
  - index: Index of the initially displayed image within the array. Defaults to 0 (first image).
  - displayKey (optional): Key used to access the image's display name from the array objects.
  - urlKey (optional): Key used to access the image URL from the array objects.
Modal Display:
- Opens a modal dialog using MatDialogRef from Angular Material.
- Component is instantiated with the previewImage function.
- Configures the modal dialog with a width of 40% and a custom class (imagePreview for styling).
- Passes the dataTypeModal object as data to the component.

Usage

Import the PreviewImageComponent in your component where you want to display an image preview.
Call the previewImage function from your component to open the preview modal.
Provide the following arguments:
- data: Array of objects or single array representing the images to preview.
- i (optional): Index of the image to display initially (defaults to 0).
- nameKey (optional): Key used to access the display name from array objects.
- urlKey (optional): Key used to access the image URL from array objects.
- width : Key used to set specific width of preview popup.

Example

TypeScript

import { PreviewImageComponent } from './preview-image.component';

 constructor(
    private reusableService: ReusableService
  ) {}
// data : for image array 
// i : index of array 
// nameKey : for fetch name from array 
// urlKey : for fetch url from array 
 previewImage(data, i?, nameKey?, urlKey?) {
    // Service required specific width for preview popup component;
    this.reusableService.previewImage(data,i,nameKey,urlKey,'40%');
 }

Use code with caution.

Additional Considerations

You might want to include sections on styling the modal dialog (using imagePreview class).
Explore navigation controls within the modal to move through images in a series (e.g., arrow buttons)

By following these guidelines and incorporating the feedback from the ratings, you can create a comprehensive and informative documentation for your Angular image preview component.\

Screenshots

Software Development

Preview Image Component Documentation

Related content