Bible Picker

An Angular standalone component for picking Bible references — books, chapters, verses, or a range — in the same spirit as a datepicker.

Live demo on StackBlitz

Features

• Standalone Angular component (<bible-picker>)
• Cascading Book → Chapter → Verse
• Stop at a single book/chapter/verse, or let the user pick a range
• In range modes, OK is enabled after the first click; a later click extends the selection
• Load a hosted Bible with bversion (pt-ara, en-niv, es-nvi, ja-jcb, zh-cnvs), or any JSON URL with jsonUrl
• Optional per-index CSS overrides
• Helper methods for a readable abbreviation (Gn 1:5-8) and for extracting verse text

Requires Angular 19+.

Install

npm install bible-picker

If npm complains about peer dependencies on an older Angular app, retry with --legacy-peer-deps. The published peer range is @angular/core / @angular/common >=19.0.0.

Quick start

The picker can load the Bible itself. Pass a known version id, a JSON URL, or an already-fetched object.

<!-- Hosted version (Portuguese ARA, English NIV, Spanish NVI, Japanese JCB, Chinese CNVS) -->
<bible-picker
  bversion="pt-ara"
  select="verses"
  (onSelected)="onSelected($event)">
</bible-picker>

<!-- Any JSON URL, including your own file -->
<bible-picker
  [jsonUrl]="'https://pub-7db5ca77d7e14ca79a36013b9fc40870.r2.dev/jsons/en-niv.json'"
  select="chapters"
  (onSelected)="onSelected($event)">
</bible-picker>

<!-- Already in memory (offline, cached, or a custom build) -->
<bible-picker [bible]="bibleData" select="any" (onSelected)="onSelected($event)"></bible-picker>

import { Component } from '@angular/core';
import { BiblePicker, Bible, BibleSelection } from 'bible-picker';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [BiblePicker],
  template: `
    <bible-picker
      bversion="pt-ara"
      select="verses"
      (onSelecting)="onSelecting($event)"
      (onSelected)="onSelected($event)">
    </bible-picker>
  `
})
export class HomeComponent {
  onSelecting(ref: BibleSelection) {
    // Fires on every click (and on Back), before the user confirms.
    console.log('Selecting', Bible.abbrevSelection(ref));
  }

  onSelected(ref: BibleSelection) {
    console.log('Selected', Bible.abbrevSelection(ref)); // e.g. "Gn 1:5-8"
    console.log(Bible.getVerses(ref));
  }
}

Priority if more than one is set: [bible] > [jsonUrl] > [bversion].

Selection modes

Pass select as a string. Default is 'any'.

| select | What the user picks | How it behaves | |---|---|---| | 'book' | One book | Clicking a book confirms immediately | | 'books' | One book, or a contiguous range | First click enables OK; click a later book to extend (e.g. Gn–Ex) | | 'chapter' | One chapter (after a book) | Clicking a chapter confirms immediately | | 'chapters' | One chapter, or a contiguous range | First click enables OK; click a later chapter to extend (e.g. Gn 1–3) | | 'verse' | One verse (after book + chapter) | Clicking a verse confirms immediately | | 'verses' | One verse, or a contiguous range | First click enables OK; click a later verse to extend (e.g. Gn 1:5–8) | | 'any' | Book, chapter, verse, or a range at the current stage | OK is enabled as soon as something is selected. Click the same book or chapter again to drill down. Click a later item to select a range instead. |

Ranges run from the first click to a later one. Clicking an earlier item after the start begins a new selection from there.

API

Inputs

| Input | Type | Default | Description | |---|---|---|---| | bversion | string | — | Known hosted version: pt-ara, en-niv, es-nvi, ja-jcb, zh-cnvs. The picker fetches it for you. | | jsonUrl | string | — | URL of a Bible JSON file (hosted or your own). | | bible | Bible | — | Bible object already in memory. Use this for offline/demo copies. | | select | 'book' \| 'books' \| 'chapter' \| 'chapters' \| 'verse' \| 'verses' \| 'any' | 'any' | How far the picker goes, and whether ranges are allowed. | | customCSS | OverridableCSS | { b: {}, c: {}, v: {} } | Inline styles keyed by 0-based index. b = book, c = chapter, v = verse. Chapter/verse keys apply at that index in every book/chapter. |

Outputs

| Output | Payload | When | |---|---|---| | onSelecting | BibleSelection | On each click and on Back, while the user is still choosing. | | onSelected | BibleSelection | When the user confirms (OK, or a single-item mode click). |

BibleSelection looks like:

{
  books: BibleBook[];  // selected books, in order
  chapters: number[];  // 1-based chapter numbers, e.g. [1, 2, 3]
  verses: number[];    // 1-based verse numbers, e.g. [5, 6, 7, 8]
}

Example for Genesis 1:5–8:

{
  books: [{ abbrev: 'Gn', name: 'Genesis', chapters: [/* full book text */] }],
  chapters: [1],
  verses: [5, 6, 7, 8]
}

Helpers

Bible.abbrevSelection(selection)
// "Gn"
// "Gn-Ex"
// "Gn 1-3"
// "Gn 1:5-8"

Bible.getVerses(selection)
// [{ abbrev: 'Gn', text: [['verse 5', 'verse 6', 'verse 7', 'verse 8']] }]

getVerses returns the selected books’ full text, then narrows to the selected chapters and verses when those arrays are non-empty.

Bible JSON

The npm package does not ship Bible text. Pass bversion or jsonUrl and the picker fetches it, or pass a bible object you loaded yourself. The demo keeps one offline copy at src/app/assets/bibles/pt-ara.json.

{
  version: 'ara',       // short id, e.g. 'kjv', 'niv', 'ara'
  language: 'pt-br',    // UI labels: 'en' | 'pt-br' | 'es' | 'zh' | 'ja'
  books: [{
    abbrev: 'Gn',
    name: 'Genesis',
    chapters: [
      ['In the beginning God created the heaven and the earth.', /* Gn 1:2 */],
      ['Thus the heavens and the earth were finished...', /* Gn 2:2 */]
    ]
  }]
}

chapters is an array of chapters; each chapter is an array of verse strings. Index 0 is chapter 1 / verse 1.

Hosted versions

| Language | Version | URL | |---|---|---| | Portuguese | Almeida Revista e Atualizada (ARA) | https://pub-7db5ca77d7e14ca79a36013b9fc40870.r2.dev/jsons/pt-ara.json | | English | New International Version (NIV) | https://pub-7db5ca77d7e14ca79a36013b9fc40870.r2.dev/jsons/en-niv.json | | Spanish | Nueva Versión Internacional (NVI) | https://pub-7db5ca77d7e14ca79a36013b9fc40870.r2.dev/jsons/es-nvi.json | | Japanese | Japanese Contemporary Bible (JCB) | https://pub-7db5ca77d7e14ca79a36013b9fc40870.r2.dev/jsons/ja-jcb.json | | Chinese | Chinese New Version, Simplified (CNVS) | https://pub-7db5ca77d7e14ca79a36013b9fc40870.r2.dev/jsons/zh-cnvs.json |

Custom styles

<bible-picker
  [bible]="bibleData"
  [customCSS]="customCSS"
  (onSelected)="onSelected($event)">
</bible-picker>

customCSS = {
  b: { 1: 'background-color: red' },                         // 2nd book
  c: { 5: 'color: brown', 6: 'color: brown' },                // chapters 6 and 7 (0-based)
  v: { 0: 'background-color: blue; color: pink' }             // 1st verse of every chapter
};

You can recompute customCSS from onSelecting if you want highlights that depend on the current pick.

Contributing

PRs are welcome, especially:

• More Bible versions and languages (ARC, KJV, …)
• UI/UX improvements
• Bug reports and extra tests

License

MIT © Ariel Aleksandrus