Integrations/Angular

Angular

Create the book in AfterViewInit.

import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core'
import { Zine } from '@zinejs/core'
import { PdfSource } from '@zinejs/pdf'

@Component({
  selector: 'app-flipbook',
  standalone: true,
  template: `<div #el></div>`,
})
export class FlipbookComponent implements AfterViewInit {
  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>

  ngAfterViewInit() {
    new Zine(this.el.nativeElement, { source: new PdfSource('https://zinejs.com/pdf/sample.pdf') })
  }
}