An Angular material component showing images in a grid display. Based on the Progressive Image Grid of Dan Schlosser adapted to Angular Material.

[]

This project modifies the 'Progressive Image Grid' so that it can be used in an Angular Material project.

Try out the live demo.

(back to top)

To use this package in your project just follow these simple steps.

The package can be used in Angular apps with Angular Material installed.

Install the package from npmjs

npm install @bepo65/mat-image-grid

Configure the mat-image-grid in your application template and provide the necessary settings.

Important: mat-image-grid must have a defined height, as the component uses height. 100% in one of its subcomponents.

<mat-image-grid [urlForImage]="UrlForImage"> loading... </mat-image-grid>

  protected UrlForImage = (
    singleImageData: MigImageData,
    imageWidth: number,
    imageHeight: number,
  ) => {
    // In this demo we use an url like 'https://picsum.photos/id/201/800/600'
    return `https://picsum.photos/id/${singleImageData.imageId}/${imageWidth.toString(10)}/${imageHeight.toString(10)}`;
  };

Besides this, we need a service that extends MatImageGridImageServiceBase and provides a list with information about each image to display.

In the html part of your project, the mat-image-grid control must be embedded in a container with a defined height that is filled by the control (e.g. by using css flex or grid).

(back to top)

Demo project to show all features of Mat-Image-Grid.

git clone [email protected]:BePo65/mat-image-grid.git
cd mat-image-grid
npm start

Navigate to http://localhost:4200

(back to top)

The definition of a parameter to filter a list of images. 'T' defines the type describing an image.

The Mat-Image-Grid component uses Angular Material (the 'mat-progress-bar' component) and makes it necessary to activate a theme in the application using mat-image-grid (e.g. by inserting @import '@angular/material/prebuilt-themes/deeppurple-amber.css'; into the 'styles.scss' file of the application).

(back to top)

import { MatImageGrid } from '@bepo65/mat-image-grid';

Component to create an angular material .....

Interface for a component that fetches data from the datastore respecting sorting and filtering. The component is generic; the given type is used to define the object for an object with image data.

Interface defining the properties of a page of images data returned from the datastore.

This interface defines the parameters from the data store defining an image.

This interface defines the parameters of a configuration object for creating a new instance of the ProgressiveImage class.

Interface defining the properties of a requests for a range of images data.

The definition of a generic function that creates an image instance from the server data ('singleImageData') and a configuration object of an image.

The definition of a parameter to filter a list of images. 'T' defines the type describing an image.

The definition of a parameter filtering for a range of values.

The definition of a parameter filtering for a single value.

The definition of a single sort parameter.

The definition of a function to get the image size (height in pixels) to use for this window width.

The definition of a function to get the minimum required aspect ratio for a valid row of images.

The definition of a parameter defining the direction of a sort.

The definition of a function that gets the url of an image from the server data, the width and the height of an image.

The definition of the unload handler returned by renderer2.listen.

(back to top)

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

The project uses 'standard-version' to create the changelog. To enable this system, commit messages are linted before commits are executed by git.

To enable this system you have to run the following scripts in your local repository home directory:

npx husky install
npx husky add .husky/commit-msg "npx --no -- commitlint --edit $1"

The structure of commit messages is:

  <header>
  <BLANK LINE>
  <body>
  <BLANK LINE>
  <footer>

header

  <type>(<scope>): <short summary>

type and scope

• build: Changes that affect the build system or external dependencies (example scope: npm)
• docs: Documentation only changes
• feat: A new feature
• fix: A bug fix
• perf: A code change that improves performance
• refactor: A code change that neither fixes a bug nor adds a feature
• test: Adding missing tests or correcting existing tests (example scopes: demo, lib, e2e)

footer

  BREAKING CHANGE: ... (requires MAJOR in Semantic Versioning)

For details of the commit messages format see Contributing to Angular.

(back to top)

Copyright © 2024 Bernhard Pottler.

Distributed under the MIT License. See LICENSE for more information.

This project uses the fonts 'Roboto' and 'Material Icons' from the Google Fonts Library that are licensed under the Apache License Version 2.0.

This project uses icons from the Google Material Icons Library that are licensed under the Apache License Version 2.0.

(back to top)

As eslint V9 requires a fundamental change to the configuration files, the update will be done in a later version.

(back to top)