ngx-name-capitalize

September 13, 2026 · View on GitHub

Angular pipe for smart capitalization of person names. Handles compound surnames, particles (de, del, la, van, von…), hyphenated names, apostrophes, and Unicode characters.

Built on top of name-capitalize.

Compatibility

ngx-name-capitalize	Angular	npm tag	Status
3.x	16 and above	`latest`	Active
2.x	14 – 15	`legacy-v2`	Maintenance
1.x	12 – 13	`legacy-v1`	Maintenance

npm install ngx-name-capitalize              # Angular 16+
npm install ngx-name-capitalize@legacy-v2    # Angular 14 – 15
npm install ngx-name-capitalize@legacy-v1    # Angular 12 – 13

A new major of this package means one thing only: the minimum supported Angular version went up. It is not an API break. 3.x therefore has no upper bound — every release is linked against every Angular major from 16 up to the current one in CI (scripts/verify-angular-compat.mjs), so support for a new Angular does not wait on a release here.

Upgrading from 3.2.0 or earlier? Those versions declared peerDependencies of ^16.0.0, which npm reads as "16 and nothing else", so installing them on Angular 17+ failed with ERESOLVE. 3.3.0 fixes the range. The library code was always compatible.

Project status

Complete, and actively verified. This package wraps one function in one Angular pipe. It uses @Pipe and PipeTransform — the part of Angular that has not changed since version 2 — so there is rarely anything to change here, and a quiet commit history is the expected outcome rather than a warning sign.

What is not quiet is the verification. Every week, CI links the published artifact against every Angular major from the supported floor up to whatever Angular released most recently, exactly the way your own build would, and runs the test suite against the newest name-capitalize. The badge above is that job; it links to the runs themselves.

Verified against Angular 16, 17, 18, 19, 20, 21 and 22 — every major this line supports. Re-checked weekly by CI, by linking the published artifact the way your build does.

That line is generated by scripts/verify-angular-compat.mjs from an actual run, not written by hand. When a new Angular major ships and passes, CI opens a pull request widening it — which is what a release on this package usually is.

Installation

npm install ngx-name-capitalize

name-capitalize is a peer dependency and is installed automatically by npm 7+. Keeping it a peer means you can upgrade the formatting engine on your own schedule, and that your app has a single copy of it even if it also depends on name-capitalize directly.

Usage

Standalone component

import { NameCapitalizePipe } from 'ngx-name-capitalize';

@Component({
  standalone: true,
  imports: [NameCapitalizePipe],
  template: `{{ name | namecase }}`
})
export class MyComponent { }

NgModule

import { NgxNameCapitalizeModule } from 'ngx-name-capitalize';

@NgModule({
  imports: [NgxNameCapitalizeModule]
})
export class AppModule { }

Both work on every supported Angular version — pick whichever matches your app.

In your template

{{ 'JUAN DE LA MAZA' | namecase }}
<!-- Output: Juan de la Maza -->

{{ "bernardo o'higgins riquelme" | namecase }}
<!-- Output: Bernardo O'Higgins Riquelme -->

{{ 'jean-pierre dupont' | namecase }}
<!-- Output: Jean-Pierre Dupont -->

Nullish values are accepted and render as an empty string, so strictTemplates is happy with the values templates actually carry:

{{ user?.name | namecase }}          <!-- string | null | undefined -->
{{ form.value.name | namecase }}
{{ name$ | async | namecase }}

In your component

import { NameCapitalizePipe } from 'ngx-name-capitalize';

@Component({
  providers: [NameCapitalizePipe]
})
export class MyComponent {
  constructor(private namecase: NameCapitalizePipe) {}

  format(name: string): string {
    return this.namecase.transform(name);
  }
}

Options

The pipe forwards an optional NameCapitalizeOptions object to name-capitalize:

{{ 'ronald mcdonald' | namecase:{ mcPrefix: true } }}
<!-- Output: Ronald McDonald -->

{{ 'dick van dyke' | namecase:{ ignoreParticles: ['van'] } }}
<!-- Output: Dick Van Dyke -->

Option	Type	Description
`particles`	`readonly string[] \| ReadonlySet<string>`	Replace the built-in particle list entirely.
`extraParticles`	`readonly string[] \| ReadonlySet<string>`	Add particles on top of the built-in list.
`ignoreParticles`	`readonly string[] \| ReadonlySet<string>`	Remove particles from the built-in list.
`mcPrefix`	`boolean`	Capitalize the letter after `Mc` (`mcdonald` → `McDonald`). Default `false`.
`particlesAfterHyphen`	`boolean`	Apply particle rules after a hyphen too. Default `false`.
`strict`	`boolean`	Throw a `TypeError` on non-string input instead of returning `''`. Default `false`.

The NameCapitalizeOptions type is re-exported for use in your components:

import { NameCapitalizeOptions } from 'ngx-name-capitalize';

Object literals written directly in a template are memoized by Angular, so the pipe stays pure and does not recompute on every change detection cycle. If you build the options object in code, hold it in a field rather than returning a fresh object from a getter.

Missing values and `strict`

By default a missing name renders as an empty string — the right behavior for a template:

{{ user?.name | namecase }}   <!-- null → '' -->

Pass strict when a missing name is a bug you want to hear about rather than a blank space, for example while formatting data you are about to persist:

{{ record.name | namecase:{ strict: true } }}
<!-- throws TypeError if record.name is not a string -->

The pipe pins strict to false unless you pass it, so a future release of the underlying engine cannot silently start throwing inside your templates.

Examples

Input	Output
`JUAN DE LA MAZA`	Juan de la Maza
`ludwig van beethoven`	Ludwig van Beethoven
`BERNARDO O'HIGGINS`	Bernardo O'Higgins
`bernardo o’higgins`	Bernardo O’Higgins
`jean-pierre dupont`	Jean-Pierre Dupont
`gabriel garcía márquez`	Gabriel García Márquez
`MIGUEL DE CERVANTES Y SAAVEDRA`	Miguel de Cervantes y Saavedra
`van gogh`	Van Gogh

Formatting rules, Unicode handling and known limitations (such as Mac prefixes and camel-cased names like DeShawn) are documented in name-capitalize.