masonry-tile

Masonry Tile

Allows you to have masonry style tiles with Material Grid List.

Installation

npm i masonry-tile --save

Requirements

• peerDependencies:

  • angular 13.0.0 and more
  • angular/cdk 13.0.0 and more
  • angular/material 13.0.0 and more

Demo

See a demo.

Usage

example

Example with a list of images and description.

<mat-grid-list #matGridList [cols]="4">
  <mat-grid-tile *ngFor="let imageItem of images" #matGridTile>
    <masonry-tile
      [rowHeight]="1"
      [gutterSize]="1"
      [matGridTile]="matGridTile"
      [matGridList]="matGridList"
    >
      <!-- content start -->
      <img [src]="imageItem?.src" [alt]="imageItem?.alt" />
      <div>{{ imageItem?.alt }}</div>
      <!-- content end -->
    </masonry-tile>
  </mat-grid-tile>
</mat-grid-list>

Publishing the library

npm run build:lib
cd dist/masonry-tile
npm publish

Update Demo

npm run build:demo

License

Like Angular, this module is released under the permissive MIT license. Your contributions are always welcome.