Nonsense Placement Mandatory
Wondering what’s next for npm?Check out our public roadmap! »

ngx-metafizzy-flickityTypeScript icon, indicating that this package has built-in type declarations

1.1.0 • Public • Published

Metafizzy Flickity for Angular

Installation of ngx-metafizzy-flickity

npm install ngx-metafizzy-flickity --save

Installation of flickity

npm install flickity --save

Add flickity in angular.json (since Angular 10)

    "build"{
        ...
        "options"{
        ...
        "styles"[
            "src/styles.scss",
            "node_modules/flickity/dist/flickity.css"
        ],
        "allowedCommonJsDependencies"["flickity"]
        },
        ...
    },

Usage

Import FlickityModule into your app's modules:

import { FlickityModule } from 'ngx-metafizzy-flickity';
 
@NgModule({
  imports: [
    FlickityModule
  ]
})
@Component({
  selector: "my-component",
  template: `
    <div flickity>
      <div *ngFor="let child of children">{{ child.title }}</div>
    </div>
  `,
})
class MyComponent {
  children = [{ title: "Child 1" }, { title: "Child 2" }, { title: "Child 3" }];
}

Configuration

Options

Read about Flickity options here: https://flickity.metafizzy.co/options.html

Examples

Inline object:

<div
  flickity
  [flickityConfig]="{cellAlign: 'left', percentPosition: true, groupCells: true}"
></div>

Default options

@Input() flickityConfigFlickity.Options = {
    groupCells: true,
    cellAlign: 'center',
    pageDots: true,
    draggable: true,
    prevNextButtons: true,
};

Events

ready: EventEmitter<Flickity>

Triggered after flickity is ready.

https://flickity.metafizzy.co/events.html#ready

change: EventEmitter<number>

Triggered after page is changed.

https://flickity.metafizzy.co/events.html#change

click: EventEmitter<{event: PointerEvent, pointer: PointerEvent, cellElement: string, cellIndex: number}>

Triggered after click an element.

https://flickity.metafizzy.co/events.html#staticClick

Examples

<div flickity (change)="onChange($event)" (click)="onClick($event)"></div>

Demo

ng serve

Install

npm i ngx-metafizzy-flickity

DownloadsWeekly Downloads

6

Version

1.1.0

License

MIT

Unpacked Size

37.5 kB

Total Files

18

Last publish

Collaborators

  • avatar