# wrInitials

> Up to two initials of a name, one grapheme each.

Source: https://ngwr.dev/reference/pipes/wr-initials  
Kind: Pipe  
Added in v15.6  
Optional

## Installation

Import the class. This entry point has no stylesheet.

```typescript
import { Component } from '@angular/core';
import { WrInitials } from 'ngwr/pipes';

@Component({ imports: [WrInitials] })
export class MyComponent {}
```

## Basic usage

The first two words give one initial each, upper-cased in `LOCALE_ID`. The rules are `wrInitials()` in `ngwr/utils`.

```angular-html
{{ 'Roman Khegay' | wrInitials }}   <!-- "RK" -->
{{ 'Madonna' | wrInitials }}        <!-- "M"  -->
{{ '王小明' | wrInitials }}          <!-- "王" -->
```

## Playground

```angular-html
{{ name | wrInitials }}
```

```angular-ts
import { Component } from '@angular/core';

import { WrInitials } from 'ngwr/pipes';

/**
 * Playground
 */
@Component({
  selector: 'wrinitials-playground-example',
  templateUrl: './wrinitials-playground-example.html',
  imports: [WrInitials],
})
export class WrinitialsPlaygroundExample {
  // Stubs. The page owned these values; the snippet shows the markup
  // that reads them, not where they come from.
  protected name: any = null;
}
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `wrInitials` | Up to two initials of a name, one grapheme each, upper-cased in `LOCALE_ID`. `wrInitials()` from `ngwr/utils` with the app locale. | `(value: string \| null \| undefined) => string` | `-` |

## See also

- [wrInitials](https://ngwr.dev/reference/utils/wr-initials) — Up to two initials of a name, one grapheme each.
- [Avatar](https://ngwr.dev/reference/components/avatar) — A user's picture, with initials as the fallback.
- [wrTruncate](https://ngwr.dev/reference/pipes/wr-truncate) — Shorten a string and end it with an ellipsis.