bunnyfly / ngx-oxford

Comma separated lists without the hassle or hubbub!

Oxford

Comma separated lists without the hassle or hubbub!

Oxford renders comma-separated lists in Angular templates for you. Just give it a list of items and a conjunction (and, or, nor, and/or, etc).

Use it as a pipe or component, and stop worrying about getting the spacing and commas right for every possibility, etc. For example:

[]                       ⇢  ""
['bunny']                ⇢  "bunny"
['bunny', 'cat']         ⇢  "bunny and cat"
['bunny', 'cat', 'dog']  ⇢  "bunny, cat, and dog"

Install it

Install ngx-oxford from npm:

npm i -s ngx-oxford

Then add OxfordModule to your imports:

import { OxfordModule } from 'ngx-oxford';

@NgModule({
  ...
  imports: [
    OxfordModule,
  ],
  ...
})

Use it

...as a pipe

For simple text lists:

"{{ list | oxford:'and' }}"

...as a component

For HTML, links, style, etc:

"<ng-container *ngFor="let x of list; let i = index">
  <a [href]="'https://www.google.com/search?q=' + x">{{ x }}</a>
  <ngx-oxford [index]="i" [length]="list.length">or</ngx-oxford>
</ng-container>"

Future

• Get it working as a structural directive. E.g. *ngFor="let x of list; oxford: 'and'". Help?
• An "etc" or ellipsis option to truncate the list if too many items. E.g.: "bunny, cat, dog, etc."

Developer setup

git clone https://github.com/bunnyfly/ngx-oxford.git
cd ngx-oxford
npm i
ng build ngx-oxford
ng serve demo

For edit-refresh of the demo while working on the lib, run ng build ngx-oxford --watch in the background while running ng serve demo.