ngx-conduit v1.2.0

NgxConduit

Useful pipes for Angular with minimal external dependencies

This project was generated with Angular CLI version 11.2.12.

Table of contents

• Installation and usage
• Pipes
  • Number
    • Ordinal
  • String
    • Possessive
    • StripUnderscores
    • UcFirstOnly
    • Reverse
• Developing
• Contributing

Installation

1. Use npm to install the package

$ npm install ngx-conduit --save

2. Each pipe has it's own module. Add a specific module such as NgxConduitOrdinalPipe as described below.

import { NgxConduitOrdinalModule } from 'ngx-conduit';

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

3. Pipes are also injectable and can be used in Components / Services / etc..

import { NgxConduitOrdinalPipe } from 'ngx-conduit';

@Component({
  // ..
  providers: [NgxConduitOrdinalPipe],
})
export class AppComponent {
  constructor(private ordinalPipe: NgxConduitOrdinalPipe) {
    this.ordinalPipe.transform(1); // Returns: "1st"
  }
  // ..
}

4. You can also use pipes as part of your template for ex.

<p>{{ 1 | ngxConduitOrdinal }}</p>
<!-- Output: "1st" -->

Pipes

Number

Ordinal

Ordinal pipe converts number to return number with ordinal (or just ordinal).

Usage: number | ngxConduitOrdinal Args: keepNumber (boolean: true) - whether to return the ordinal or the ordinal with the number

<span>Place: {{1 | ngxConduitOrdinal}}</span>
<!-- Output: "1st" -->
<span>Place: {{1 | ngxConduitOrdinal: false}}</span>
<!-- Output: "st" -->

String

Possessive

Possessive pipe converts a string to the possessive version.

Usage: string | ngxConduitPossessive

<span>Owner: {{'Gemma' | ngxConduitPossessive}}</span>
<!-- Output: "Gemma's" -->
<span>Owner: {{'Thomas' | ngxConduitPossessive}}</span>
<!-- Output: "Thomas'" -->

UcFirstOnly

UcFirstOnly pipe uppercases the first character of a string and lowercases the rest.

Usage: string | ngxConduitUcFirstOnly

<span>Owner: {{'sOME VALUE' | ngxConduitUcFirstOnly}}</span>
<!-- Output: "Some value" -->

StripUnderscores

StripUnderscores pipe removes all underscores from a string, replacing them with spaces.

Usage: string | ngxConduitStripUnderscores

<span>Owner: {{'some_value' | ngxConduitStripUnderscores}}</span>
<!-- Output: "some value" -->

Reverse

Reverses a string

Usage: string | ngxConduitReverse

<p>{{'some value' | ngxConduitReverse}}</p>
<!-- Output: "eulav emos" -->

Developing

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running linting

Run ng lint to lint using tslint.

Run npm run lint:prettier to check for prettier errors (and lint:prettier:fix to fix)

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Run ng build --prod for a production build.

Contributing

Contributions welcome. Before contributing any new fix or feature, please open an issue first. Create a new branch from develop, add the fix/feature and create a PR to develop branch. Please run linting and testing commands before raising the PR.

Workflow

This project uses commitizen, commit lint, and cz-conventional-changelog to enforce commit messages, which are also enforced with husky hooks. Use npm run commit to commit changes.

Semantic release is used for automating the package release workflow including determining the next version number (based on the commit types), generating the release notes and publishing the package.

Pushing to feature branches will trigger a Travis CI job which runs linting and creates a production build of the library, but does not publish the version to npm.

Merges to the protected 'main' branch (via pull requests) will be build by Travis and will publish the version to npm if/when necessary.