# NgxFlexMasonryGrid
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://github.com/offensichtbar-codestock/ngx-flex-masonry-grid) [](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: `
{{item.title}}
`
})
class DemoComponent {
myitems = [
{ title: 'item 1', image: '...' },
{ title: 'item 2' },
{ title: 'item 3' },
];
}
```
#### Example
```sh
{{item.title}}
{{item.description}}
```
> 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: `
{{item.title}}
`
})
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) => {
...
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://opensource.org/licenses/MIT)