Oxford renders comma-separated lists in Angular templates for you. Just give it a list of items and a conjunction (e.g. 'and', 'or', 'nor', 'and/or', etc).
Use it as a pipe or component, and stop worrying about how many items you have, getting spacing right, etc. For example:
[] ⇢ ""
['bunny'] ⇢ "bunny"
['bunny', 'cat'] ⇢ "bunny and cat"
['bunny', 'cat', 'dog'] ⇢ "bunny, cat, and dog"
Install ngx-oxford from npm:
npm i -s ngx-oxford
Then add OxfordModule to your imports:
import { OxfordModule } from 'ngx-oxford';
@NgModule({
...
imports: [
OxfordModule,
],
...
})
For simple text lists:
"{{ list | oxford:'and' }}"
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
>"
- Get it working as an structural directive. E.g.
*ngFor="let x of list; oxford: 'and'"
. Help?