A premium, feature-rich, and fully responsive EPUB reader library for Angular applications. Built with performance, aesthetics, and ease of use in mind.
npm install b-epubA premium, feature-rich, and fully responsive EPUB reader library for Angular applications. Built with performance, aesthetics, and ease of use in mind.
- 📖 Smooth Reading: Powered by epub.js for reliable and high-performance rendering.
- 📱 Fully Responsive: Optimized mobile-first design that adapts flawlessly to phones, tablets, and desktops.
- 🔒 Free Sample Mode: Built-in support for restricting content (by percentage or pages) with a premium "Preview End" modal and call-to-actions.
- 💎 Premium Aesthetics: Modern glassmorphism UI, smooth animations, and refined typography.
- 🌓 Aesthetic Dark Mode: Deeply integrated dark mode with rgb(32 33 32) background for eye comfort.
- 🖋️ Rich Text Notes: Integrated ngx-editor for creating professionally formatted notes.
- 📚 Beautiful TOC: Hierarchical Table of Contents with smooth navigation.
- 🖼️ Cover Preview: Pulse-animated book cover previews during load.
- 🏷️ State-Managed Annotations: Fully event-driven highlights, underlines, and bookmarks.
- 🔍 Advanced Search: Case-insensitive search with highlighted snippets and navigation.
- ⚙️ Highly Customizable: extensive configuration options for menus, tools, and behaviors.
---
Install the package via npm:
``bash`
npm install b-epub --legacy-peer-deps
Peer Dependencies:
Ensure the following peer dependencies are installed:
`bash`
npm install epubjs ngx-editor @angular/cdk --save
---
Add EpubReaderModule to your application module:
`typescript
import { EpubReaderModule } from 'b-epub';
@NgModule({
imports: [
EpubReaderModule,
// ... other imports
]
})
export class AppModule { }
`
Add the necessary styles to your styles.scss (or angular.json styles array):
`scss`
/ In styles.scss /
@import "ngx-editor/lib/styles/editor.scss";
---
`html`
The component is designed to be stateless regarding annotations, allowing the parent application to manage persistence. It also supports a robust "Free Sample" mode.
`html`
[coverPage]="coverImageUrl"
[freeSample]="true"
[sampleLimit]="10"
[sampleLimitType]="'percentage'"
(onBuyNow)="handleBuyNow()"
[underlineCfiList]="myUnderlines"
[highlightCfiList]="myHighlights"
[bookmarkCfiList]="myBookmarks"
(underlineAddRequest)="onUnderlineAdd($event)"
(highlightAddRequest)="onHighlightAdd($event)"
(bookmarkAddRequest)="onBookmarkAdd($event)">
---
| Input | Type | Default | Description |
|---|---|---|---|
| epubBlob | Blob | null | Required. Local Blob object of the EPUB file. |coverPage
| | string | null | URL of the book cover image (for loading & preview screens). |logo
| | string | null | URL of your brand logo to display in the header. |freeSample
| Sample Mode | | | |
| | boolean | false | Enables restricted access mode ("Free Sample"). |sampleLimit
| | number | 10 | The limit for the sample (percentage or pages). |sampleLimitType
| | 'percentage' \| 'pages' | 'percentage' | The type of limit to apply. |underlineCfiList
| Annotations | | | |
| | string[] \| UnderlinePayload[] | [] | List of underlines to render. |highlightCfiList
| | HighlightPayload[] | [] | List of highlights to render. |bookmarkCfiList
| | string[] | [] | List of bookmarks to render. |pagePosition
| | string | null | The specific CFI location to navigate to continuously. |colourCodeList
| Customization | | | |
| | string[] | ['#F44336', ...] | Palette for highlight colors. |underlineColor
| | string | null | Default underline color (if not using list). |menuConfig
| | MenuConfig | null | Custom configuration for menus and quick actions. |enableDarkMode
| Feature Toggles | | | |
| | boolean | true | Enable/Disable Dark Mode button. |enableSearch
| | boolean | true | Enable/Disable Search tool. |enableHighlights
| | boolean | true | Enable/Disable Highlight & Underline tools. |enableBookmarks
| | boolean | true | Enable/Disable Bookmark tool. |enableNotes
| | boolean | true | Enable/Disable Note creation. |enableChapterList
| | boolean | true | Enable/Disable TOC navigation. |enableFontSize
| | boolean | true | Enable/Disable font size controls. |enableTextSelection
| | boolean | true | Allow/Disallow text selection. |
| Output | Payload | Description |
|---|---|---|
| Commercial | | |
| onBuyNow | void | Emitted when the user clicks "Buy" in the preview modal or footer. |onSubscribe
| | void | Emitted when the user clicks "Subscribe" (if configured). |onLoginRedirect
| | void | Emitted when a restricted action requires login. |underlineAddRequest
| Annotations | | |
| | UnderlinePayload | request to add an underline. |underlineRemoveRequest
| | {cfi: string} | Request to remove an underline. |highlightAddRequest
| | HighlightPayload | Request to add a highlight. |highlightRemoveRequest
| | {cfi: string} | Request to remove a highlight. |bookmarkAddRequest
| | BookmarkPayload | Request to add a bookmark. |bookmarkRemoveRequest
| | BookmarkPayload | Request to remove a bookmark. |pagePositionOnDestroy
| State | | |
| | string | Emits the last reading location (CFI) on component destroy. |customMenuAction
| | {id: string, data: any}` | Emits when a custom menu item is triggered. |
---
MIT