Allows you to have masonry style tiles with Material Grid List.
npm i masonry-tile --save
-
peerDependencies:
angular
18.0.0
and moreangular/material
18.0.0
and more
Use for older versions:
1.1.0
:angular
>=16.0.0
&angular/material
>=16.0.0
1.0.0
:angular
>=13.0.0
&angular/material
>=13.0.0
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>
matGridTile
(Required) : reference to matGridTilematGridList
(Required) : reference to matGridList
Include in your module:
import { MatGridListModule } from '@angular/material/grid-list';
import { MasonryTileModule } from 'masonry-tile';
@NgModule({
imports: [
MatGridListModule, // required
MasonryTileModule,
],
})
export class MyModule {}
npm run build:lib
npm run publish:lib
npm run build:demo
Like Angular, this module is released under the permissive MIT license. Your contributions are always welcome.