# @offensichtbar-codestock/ngx-flex-masonry-grid

> Angular Module for displaying items in a flex-based masonry layout without any third party dependencies

Latest version **11.2.7** (published 2021-04-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install @offensichtbar-codestock/ngx-flex-masonry-grid
pnpm add @offensichtbar-codestock/ngx-flex-masonry-grid
yarn add @offensichtbar-codestock/ngx-flex-masonry-grid
bun add @offensichtbar-codestock/ngx-flex-masonry-grid
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 11.2.7 |
| Published | 2021-04-03 |
| First published | 2021-03-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 334.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Alexander & Mirja Tschakarov Offensichtbar |
| Maintainers | offensichtbar-codestock |
| Keywords | angular, angular ivy, masonry, masonry grid, masonry feed, flex, css, flex-box, grid, ngx |

## Links

- npm: https://www.npmjs.com/package/@offensichtbar-codestock/ngx-flex-masonry-grid
- Repository: https://github.com/offensichtbar-codestock/ngx-flex-masonry-grid
- Issues: https://github.com/offensichtbar-codestock/ngx-flex-masonry-grid/issues
- npm.io page: https://npm.io/package/@offensichtbar-codestock/ngx-flex-masonry-grid

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 11.2.7 (latest) — 2021-04-03
- 11.2.6 — 2021-03-26
- 11.0.9 — 2021-03-25
- 11.0.8 — 2021-03-25
- 11.0.7 — 2021-03-25
- 11.0.6 — 2021-03-25

## README

# NgxFlexMasonryGrid

![Offensichtbar Logo](https://i.postimg.cc/nz9jhvpZ/osb-header-git.jpg)

Angular Module for displaying items in a flex-based masonry layout without any third party dependencies. The grid layout only uses the css flexbox feature. In contrast to well-known Masonry layouts, it doesn't use absolute positioning which makes it usable for various css frameworks. The distances are calculated using a simple transform style (translateY)...

[![](https://img.shields.io/github/package-json/v/offensichtbar-codestock/ngx-flex-masonry-grid?color=%23009fe3)](https://github.com/offensichtbar-codestock/ngx-flex-masonry-grid) [![npm version](https://img.shields.io/npm/v/@offensichtbar-codestock/ngx-flex-masonry-grid?color=%23009fe3)](https://www.npmjs.com/package/@offensichtbar-codestock/ngx-flex-masonry-grid)

## Installation

`npm install @offensichtbar-codestock/ngx-flex-masonry-grid --save`

## Usage

Import `NgxFlexMasonryGridModule` into the app's modules:

```typescript
import { NgxFlexMasonryGridModule } from '@offensichtbar-codestock/ngx-flex-masonry-grid';

@NgModule({
    imports: [NgxFlexMasonryGridModule]
})
```


```typescript
@Component({
    selector: 'demo-component',
    template: `
        <osb-ngx-flexmasonry-grid class="grid">
        <osb-ngx-flexmasonry-grid-item class="grid-item" *ngFor="let item of myitems">
            {{item.title}}
        </osb-ngx-flexmasonry-grid-item>
        </osb-ngx-flexmasonry-grid>
        `
})
class DemoComponent {
    myitems = [
        { title: 'item 1', image: '...' },
        { title: 'item 2' },
        { title: 'item 3' },
    ];
}
```

#### Example
```sh
<div class="container-fluid">

  <osb-ngx-flexmasonry-grid class="row">

    <osb-ngx-flexmasonry-grid-item class="col-xl-3 col-lg-4 col-sm-6" *ngFor="let item of myitems">

      <div class="card shadow">
        <img src="https://i.postimg.cc/MHdV6X6K/osb-cs.jpg" class="card-img-top" />
        <div class="card-body">
          <h5 class="card-title">{{item.title}}</h5>
          <p class="card-text">{{item.description}} </p>
        </div>
      </div>

    </osb-ngx-flexmasonry-grid-item>

  </osb-ngx-flexmasonry-grid>

</div>
```

> Note: `always use paddings` 
To avoid ugly side effects, always use paddings instead of margins for the spacing between flexboxes.

## Event Callbacks

1. **layoutComplete($event)**
2. **itemRemoved($event)**
3. **itemLoaded($event)**
4. **itemsLoaded($event)**

```typescript
import { NgxFlexMasonryGridItemComponent } from '@offensichtbar-codestock/ngx-flex-masonry-grid';

@Component({
    selector: 'demo-component',
    template: `
        <osb-ngx-flexmasonry-grid class="grid" 
        (layoutComplete)="layoutComplete($event)"
        (itemRemoved)="itemRemoved($event)"
        (itemLoaded)="itemLoaded($event)"
        (itemsLoaded)="itemsLoaded($event)"
        >
            <osb-ngx-flexmasonry-grid-item class="grid-item" *ngFor="let item of myitems">
                {{item.title}}
            </osb-ngx-flexmasonry-grid-item>
        </osb-ngx-flexmasonry-grid>
        `
})
export class DemoComponent {
  ...

    /*
    * @param $event: NgxFlexMasonryGridItemComponent 
    */
    itemLoaded($event:NgxFlexMasonryGridItemComponent) {
        console.log('Item loaded '  +  $event)
    }

    /*
    * @param $event: NgxFlexMasonryGridItemComponent 
    */
    itemRemoved($event:NgxFlexMasonryGridItemComponent) {
        console.log('Item removed '  +  $event)
    }

    /*
    * @param $event: number 
    */
    itemsLoaded($event:number) {
        console.log('Count loaded items'  +  $event)
    }

    /*
    * @param $event: void 
    */
    layoutComplete($event:any) {
        console.log('Layout complete')
    }
}
```

## Public Methods

The `forceUpdateLayout()` method is available to update the layout manually. This only works if all items are loaded and ready.

```typescript
  
    import {NgxFlexMasonryGridComponent} from '@offensichtbar-codestock/ngx-flex-masonry-grid';

    export class DemoComponent {

        @ViewChild(NgxFlexMasonryGridComponent) masonry?: NgxFlexMasonryGridComponent;

        constructor(private service : RootService) {
            this.service.getitems.subscribe((items: Array<any>) => {
                ...
                this.masonry?.forceUpdateLayout();
            });
            
        }
    }
```


## Features

Feel free to use a CSS framework of your choice like Bootstrap. 

## Todos

1. Add more animation options for items :enter and :leave like\
NgxFMG_ANIMATION.**SCALE_IN**\
NgxFMG_ANIMATION.**FLIP_IN_Y**\
NgxFMG_ANIMATION.**FLIP_IN_X**

Maybe provided in a future release

## Demo

View live demo on stackblitz:\
[stackblitz editor](https://stackblitz.com/edit/demo-ngx-flex-masonry-grid?file=src/app/app.component.ts)\
[stackblitz live demo](https://demo-ngx-flex-masonry-grid.stackblitz.io)

## Licence

[![](https://img.shields.io/github/license/offensichtbar-codestock/ngx-flex-masonry-grid?color=%23009fe3)](https://opensource.org/licenses/MIT)

---
_Source: https://npm.io/package/@offensichtbar-codestock/ngx-flex-masonry-grid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._