💡 Tip: How to Display & Correctly in Alpha UI from Language Configuration

Community Best Practices & Tutorials
1

:bug: The Problem

When you use & in your Alpha language configuration file, the UI renders it as & instead of &.

Example:

# In lang config
participation_and_eligibility = Participation & Eligibility

# What shows in UI ❌
Participation & Eligibility

This happens because Angular automatically HTML-encodes the & character when using {{ }} interpolation.

:white_check_mark: The Fix

Use the Unicode escape sequence \u0026 instead of & in your language configuration file.

# In lang config
participation_and_eligibility = Participation \u0026 Eligibility

# What shows in UI ✅
Participation & Eligibility

That’s it! No changes needed in HTML templates or TypeScript files.

:clipboard: Quick Reference

Instead of Use
& \u0026

:memo: Notes

  • This fix applies only to the lang configuration file

  • Works for all keys using {{lang.key_name}} interpolation

  • No HTML or TypeScript changes required

Hope this saves someone the debugging time! Drop a comment if you have questions. :raising_hands:

2 Likes