Angular pipe to format WhatsApp-style text (bold, italic, strikethrough, code, etc.)
npm install ng-whatsapp-formatNgWhatsappFormatPipe, a powerful Angular pipe for parsing and rendering WhatsApp-like formatted text (bold, italic, strike, inline code, quotes, and links) as styled HTML.
Inline Code
google.com)
bash
npm install ng-whatsapp-format
`
Usage
$3
In your Angular module or component:
`typescript
import { NgWhatsappFormatPipe } from "ng-whatsapp-format-pipe";
`
If using the pipe stand-alone (Angular 14+), simply register it in your component:
`typescript
@Component({
selector: "your-component",
standalone: true,
imports: [NgWhatsappFormatPipe],
})
export class YourComponent {}
`
$3
`html
`
> Tip: Always bind to innerHTML for styled output! Do not use {{ text | ngWhatsappFormat }}.
Supported Formats
| WhatsApp Syntax | Renders as | Example Input | Output |
| --------------- | ------------------ | --------------- | ------------------------------- |
| bold | Bold | bold | bold |
| _italic_ | _Italic_ | _italic_ | _italic_ |
| ~strike~ | ~~Strike-through~~ | ~strike~ | ~~strike~~ |
| \inline\ | Inline code | \code\ | code |
| > quote | Blockquote | > quoted text | > quoted text |
| google.com | Clickable link | google.com | google.com |
Example
TypeScript:
`typescript
message = "Bold _Italic_ ~Strike~ Code > Quote google.com";
`
Template:
`html
`
Renders as:
Bold _Italic_ ~~Strike~~ Code`