data-text

Overview

data-text binds data values to an element's text content. It's the most commonly used directive for displaying dynamic text.

When to use:

• Display text from data objects
• Show user information, labels, or dynamic content
• Format values with pipes (formatters)

Why use it:

• ✅ Safely displays text (XSS-safe)
• ✅ Supports formatters via pipe syntax
• ✅ Reactive - updates automatically when data changes
• ✅ Works with nested properties

Basic Usage

Simple Text Binding

<span data-text="username"></span>

With data:

{ username: "John Doe" }

Output:

<span>John Doe</span>

Nested Properties

<span data-text="user.profile.name"></span>

With data:

{
  user: {
    profile: {
      name: "Jane Smith"
    }
  }
}

Output:

<span>Jane Smith</span>

Syntax

<element data-text="expression | formatter1 | formatter2">

Features

1. Simple Property Binding

<p data-text="title"></p>
<p data-text="description"></p>

2. Nested Object Access

<span data-text="product.category.name"></span>
<span data-text="order.customer.email"></span>

3. Array Index Access

<span data-text="items[0].name"></span>
<span data-text="users[2].email"></span>

4. Formatters (Pipes)

Transform values using formatters:

<!-- Uppercase -->
<span data-text="name | uppercase"></span>

<!-- Lowercase -->
<span data-text="email | lowercase"></span>

<!-- Date formatting -->
<span data-text="createdAt | date:'D MMM YYYY'"></span>

<!-- Number formatting -->
<span data-text="price | number:2"></span>

<!-- Currency -->
<span data-text="total | currency:'THB'"></span>

5. Chained Formatters

<span data-text="name | trim | uppercase"></span>

Advanced Examples

User Profile Card

<div class="profile-card">
  <h2 data-text="user.name"></h2>
  <p class="email" data-text="user.email | lowercase"></p>
  <p class="joined">
    Member since: <span data-text="user.createdAt | date:'MMMM YYYY'"></span>
  </p>
  <p class="status" data-text="user.status | uppercase"></p>
</div>

Product Display

<div class="product">
  <h3 data-text="product.name"></h3>
  <p class="price" data-text="product.price | currency:'THB'"></p>
  <p class="stock">
    In Stock: <span data-text="product.quantity | number"></span>
  </p>
  <p class="category" data-text="product.category.name"></p>
</div>

Inside data-for Loop

<ul data-for="item in items">
  <template>
    <li>
      <span class="index" data-text="index + 1"></span>.
      <span class="name" data-text="item.name"></span>
      <span class="price" data-text="item.price | currency"></span>
    </li>
  </template>
</ul>

With Fallback Values

<span data-text="user.nickname || user.name || 'Anonymous'"></span>

API Reference

Supported Expressions

Built-in Formatters

Common Pitfalls

⚠️ 1. Don't Use HTML Content

<!-- ❌ Wrong - HTML will be escaped -->
<div data-text="htmlContent"></div>
<!-- Output: &lt;strong&gt;Bold&lt;/strong&gt; -->

<!-- ✅ Correct - Use data-html -->
<div data-html="htmlContent"></div>

⚠️ 2. Property Path Case Sensitivity

<!-- ❌ Wrong - Case mismatch -->
<span data-text="user.Name"></span>  <!-- Won't work if data has 'name' -->

<!-- ✅ Correct - Match exact property name -->
<span data-text="user.name"></span>

⚠️ 3. Accessing Undefined Properties

<!-- ❌ May show 'undefined' -->
<span data-text="user.address.city"></span>

<!-- ✅ Use optional chaining or fallback -->
<span data-text="user.address?.city || 'N/A'"></span>

Related Directives

• data-html - For rendering HTML content
• data-attr - For binding to attributes
• data-for - For list iteration