⃁ Riyal

Guide · 3 min read · Updated 2026-05-08

How to display the Saudi Riyal symbol (U+20C1) in Angular, Solid, or vanilla HTML

Web Components for the official SAMA Saudi Riyal sign work in every framework: Angular, Solid, Qwik, Astro, vanilla HTML — anywhere Custom Elements run. <riyal-symbol>, <riyal-price>, <riyal-animated-price>, and <riyal-input> are all reactive, SSR-friendly, and shadow-DOM styled.

Not on React, Vue, or Svelte? riyal/web-component ships the same primitives as standard Custom Elements. They work in Angular, Solid, Qwik, Astro, plain HTML — anywhere Custom Elements run.

Install

pnpm add riyal

Register the elements once

import { defineRiyalElements } from "riyal/web-component";
defineRiyalElements();

Call this once at app boot. defineRiyalElements guards typeof customElements so it’s safe to import in SSR environments — the element registration just no-ops on the server.

Use the elements

<riyal-symbol size="1.5em"></riyal-symbol>

<riyal-icon width="32" height="32"></riyal-icon>

<riyal-price amount="2499.99" locale="ar-SA" decimals="0" compact></riyal-price>

<riyal-animated-price amount="1234" duration="600"></riyal-animated-price>

<riyal-input value="0"></riyal-input>

Every attribute is observed via attributeChangedCallback, so setAttribute() from any framework binding triggers a re-render with no extra boilerplate.

Angular

Allow custom elements in your module config and bind via property/event syntax:

// app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core";

@NgModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA] })
export class AppModule {}

<!-- component template -->
<riyal-price [attr.amount]="product.price" locale="ar-SA"></riyal-price>
<riyal-input [attr.value]="amount" (riyal-change)="onChange($event.detail.value)"></riyal-input>

riyal-input events

The masked-style input dispatches a CustomEvent("riyal-change", { detail: { value: number } }) on every change:

document.querySelector("riyal-input").addEventListener("riyal-change", (e) => {
  console.log(e.detail.value); // number
});

Shadow DOM styling

Each element uses a closed shadow root. Override the symbol colour and size with CSS custom properties on the host:

riyal-price {
  --riyal-color: #006c35;   /* Saudi green */
  --riyal-size: 1.25rem;
}

Next steps

Built by Pooya Golchian · riyal on npm · live demo