ngx-isotope2

Isotope module for Angular 7

ngx-isotope is in development and not ready for production use. Feel free to install and try it out, but depend on it at your own risk.

Table of contents

• Getting Started
• Installation instructions
• Consuming the library
• Configuration

Getting Started

Installation instructions

To install this library, run:

$ npm install ngx-isotope2 --save

If you're using angular-cli add isotope-layout, masonry-layout and imagesloaded to your file configuration angular.json:

"scripts": [
  "../node_modules/masonry-layout/dist/masonry.pkgd.min.js",
  "../node_modules/isotope-layout/dist/isotope.pkgd.min.js",
  "../node_modules/imagesloaded/imagesloaded.pkgd.js"
]

Consuming the library

Import NgxIsotope2Module from your Angular AppModule:

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

// Import the library
import { NgxIsotope2Module } from 'ngx-isotope2';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    NgxIsotope2Module
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once your library is imported, you can use its components, directives and pipes in your Angular application:

 @Component({
   selector: 'my-component',
   template: `
     <isotope-grid>
       <isotope-item *ngFor="let item of items">{{item.name}}</isotope-item>
     </isotope>
 })
 class MyComponent {
   items = [
     {name: 'Item 1'},
     {name: 'Item 2'},
     {name: 'Item 3'},
     {name: 'Item 4'},
     {name: 'Item 5'},
   ]
 }

Configuration

Options

Read about Isotope options here: https://isotope.metafizzy.co/options.html

The options attribute takes an object with the following properties:

• itemSelector: string;
• layoutMode: LayoutModes;
• percentPosition: boolean;
• stamp: string;

Examples

Inline object:

<isotope-grid [options]="{ itemSelector: '.grid-item' }"></isotope-grid>

From parent component:

import { IsotopeOptions } from 'ngx-isotope';

public myOptions: IsotopeOptions = {
  itemSelector: '.grid-item'
};

<isotope-grid [options]="myOptions"></isotope-grid>

Developers

Mayank Patel

License

MIT ©