Pagiflow Angular
Documentation

import { Component } from '@angular/core';
import { PagiflowComponent, PagiflowSlideComponent } from 'pagiflow/angular';

@Component({
  selector: 'app-slider',
  standalone: true,
  imports: [PagiflowComponent, PagiflowSlideComponent],
  template: `
    <pf-pagiflow [options]="{ loop: true, nav: true }">
      <!-- Recommended: Use pf-slide as an attribute to avoid extra DOM wrappers -->
      <div pf-slide class="slide-card">Slide 1</div>
      <div pf-slide class="slide-card">Slide 2</div>
      <div pf-slide class="slide-card">Slide 3</div>
    </pf-pagiflow>
  `
})
export class SliderComponent {}

<pf-pagiflow
  [options]="sliderOptions"
  className="my-slider"
  [style]="{ '--pf-accent': '#0ea5e9' }"
>
  <pf-slide className="hero-slide" [style]="{ padding: '12px' }">Slide 1</pf-slide>
  <pf-slide>Slide 2</pf-slide>
</pf-pagiflow>

import { Component, ElementRef, viewChild } from '@angular/core';
import { usePagiflow } from 'pagiflow/angular';

@Component({
  template: `
    <div class="controls">
      <button (click)="pf.prev()">Prev</button>
      <span>Active: {{ pf.currentIndex() + 1 }}</span>
      <button (click)="pf.next()">Next</button>
    </div>

    <div #slider class="pagiflow">
      <div class="pf-slide">1</div>
      <div class="pf-slide">2</div>
    </div>
  `
})
export class CustomSliderComponent {
  pf = usePagiflow({ loop: true });
  sliderEl = viewChild<ElementRef>('slider');

  constructor() {
    // Attach the element to the signal
    effect(() => {
      const el = this.sliderEl()?.nativeElement;
      if (el) this.pf.sliderRef.set(el);
    });
  }
}

import { Component, ViewChild } from '@angular/core';
import { PagiflowComponent, PagiflowSlideComponent, PagiflowOptions } from 'pagiflow/angular';

@Component({
  selector: 'app-pagiflow-demo',
  standalone: true,
  imports: [PagiflowComponent, PagiflowSlideComponent],
  template: `
    <pf-pagiflow
      #pf
      [options]="options"
      className="product-slider"
      (ready)="onReady()"
      (slideChange)="onSlideChange($event)"
    >
      <pf-slide className="slide-card" [style]="{ padding: '16px' }">Slide 1</pf-slide>
      <pf-slide className="slide-card" [style]="{ padding: '16px' }">Slide 2</pf-slide>
      <pf-slide className="slide-card" [style]="{ padding: '16px' }">Slide 3</pf-slide>
      <pf-slide className="slide-card" [style]="{ padding: '16px' }">Slide 4</pf-slide>
    </pf-pagiflow>

    <div style="margin-top:12px; display:flex; gap:8px;">
      <button (click)="pf?.prev()">Prev</button>
      <button (click)="pf?.next()">Next</button>
      <button (click)="pf?.goTo(0, { instant: true })">Go First</button>
      <button (click)="logInstance()">getInstance()</button>
    </div>
  `
})
export class PagiflowDemoComponent {
  @ViewChild('pf') pf?: PagiflowComponent;

  options: PagiflowOptions = {
    loop: true,
    nav: true,
    paginate: true,
    itemsPerSlide: 1,
    gap: 12,
    autoplay: true,
    autoplayDelay: 2500,
    thumbnails: {
      enabled: true,
      position: 'bottom',
      thumbWidth: '90px',
      gap: '8px'
    }
  };

  onReady() {
    console.log('Pagiflow ready');
  }

  onSlideChange(index: number) {
    console.log('Active index:', index);
  }

  logInstance() {
    const instance = this.pf?.getInstance();
    console.log('Raw instance:', instance);
  }
}