<h1>AngularEpubViewer</h1>
npm install angular-epub-viewerThis is a simple epub viewer component for angular4+ websites.
All issues and pull requests are welcome!
https://androidovshchik.github.io/AngularEpubViewer
```
npm install epubjs@0.2.x --save
npm install angular-epub-viewer --save
(Actual version of the 2-nd branch for epub.js may be found here)
Then add required epub.js script to your .angular-cli.json
`
{
...
"apps": [
{
...
"scripts": [
"../node_modules/epubjs/build/epub.js",
...
]
}
]
}
`
Optional scripts:
> "../node_modules/epubjs/build/hooks.js"
>
> includes default plugins
> "../node_modules/epubjs/build/libs/zip.min.js" (recommended)
>
> includes JSZip.js library
> "../node_modules/epubjs/build/libs/localforage.min.js"
>
> includes localForage.js library
Other official plugins may be found here
In folder add-ons are also available my own hooks, include them such way:
"../node_modules/angular-epub-viewer/add-ons/YOUR_CHOSEN_HOOK_NAME.js"
Compatibility coming with wicked-good-xpath
Include these scripts in .angular-cli.json:
``
"../node_modules/epubjs/examples/wgxpath.install.js",
"../node_modules/epubjs/hooks/extensions/wgxpath.js"
*.module.ts file
`js
import { AngularEpubViewerModule } from 'angular-epub-viewer';
@NgModule({
...
imports: [
...
AngularEpubViewerModule
]
})
`
*.component.html file
`html`
*.component.ts file
`js
@Component({
...
})
export class AppComponent {
@ViewChild('epubViewer')
epubViewer: AngularEpubViewerComponent;
openFile(event) {
this.epubViewer.openFile(event.target.files[0]);
}
}
`
Fields:
| Signature | Short Description |
| :------------- |:-------------|
| epub: ePub | Primary object |root: ElementRef
| | Root container's DOM reference |currentLocation: EpubLocation
| | Current location of document's rendered part |documentReady: boolean
| | Indicates whenever document is ready |isChapterDisplayed: boolean
| | Indicates whenever chapter is displayed |computingPagination: boolean
| | Indicates whenever pagination is computing |searchingText: boolean
| | Indicates whenever searching text |
Input parameters:
| Signature | Default value | Short Description |
| :------------- |:-------------|:-------------|
| padding: string | null | Root container's padding in px, em, etc |autoPagination: boolean
| | false | Enables auto calculate of pagination after document is ready or viewport has been changed |autoMetadata: boolean
| | false | Enables auto loading of metadata after document is ready |autoTOC: boolean
| | false | Enables auto loading of table of contents after document is ready |
Output events:
| Signature | Short Description |
| :------------- |:-------------|
| onDocumentReady: EventEmitter | Get event when document is loaded |onChapterUnloaded: EventEmitter
| | Get event when chapter is unloaded |onChapterDisplayed: EventEmitter
| | Get event when chapter is displayed |onLocationFound: EventEmitter
| | Get event about the current location |onSearchFinished: EventEmitter
| | Get event about search results |onPaginationComputed: EventEmitter
| | Get event about pagination |onMetadataLoaded: EventEmitter
| | Get event about metadata |onTOCLoaded: EventEmitter
| | Get event about table of contents |onErrorOccurred: EventEmitter
| | Get event when any error occurred |
Methods:
| Signature | Short Description |
| :------------- |:-------------|
| openLink(link: string): void | Opens EPUB document by link |openFile(file: File): void
| | Opens EPUB document file |goTo(location: string or number): void
| | Navigates to the specified url or EPUB CFI or page |nextPage(): void
| | Navigates to the next page |previousPage(): void
| | Navigates to the previous page |searchText(text: string): void
| | Searches all text matches in the current chapter |setStyle(style: string, value: string): void
| | Adds style to be attached to the document's body element |resetStyle(style: string): void
| | Removes a style from the rendered document |computePagination(): void
| | Calculates pagination as output event |loadMetadata(): void
| | Loads metadata as output event |loadTOC(): void
| | Loads table of contents as output event |
```
git clone https://github.com/androidovshchik/AngularEpubViewer.git
cd AngularEpubViewer
git submodule update --init --recursive
npm install
npm start
Open http://localhost:4200 in browser

EPUB is a registered trademark of the IDPF.