Localization

Localization represents the process of making something local in character or restricting it to a particular place. In the context of Smart HTML Elements, users can localize and change all Texts, Numeric, Date formats and built-in Error messages thrown by the Custom Elements.

Each custom element exposes three properties for localization:

  • messages - defines the text and messages used in the UI components.

    Example:

    'en': {
        'propertyUnknownType': '\'{{name}}\' property is with undefined \'type\' member!',
        'propertyInvalidValue': 'Invalid \'{{name}}\' property value! Actual value: {{actualValue}}, Expected value: {{value}}!',
        'propertyInvalidValueType': 'Invalid \'{{name}}\' property value type! Actual type: {{actualType}}, Expected type: {{type}}!',
        'elementNotInDOM': 'Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.',
        'moduleUndefined': 'Module is undefined.',
        'missingReference': '{{elementType}}: Missing reference to {{files}}.',
        'htmlTemplateNotSuported': '{{elementType}}: Browser doesn\'t support HTMLTemplate elements.',
        'invalidTemplate': '{{elementType}}: "{{property}}" property accepts a string that must match the id of an HTMLTemplate element from the DOM.'
    }
    
  • locale - defines the messages from the messages object that will be used in the UI Components localization. By default, the property is set to 'en'.
  • localize - function which allows you to localize manually a text.
    const localizedError = that.localize('propertyUnknownType', { name: 'MyPropertyName'});                
    
    The JSON object passed to the localize function call replaces the {{name}} in the messages object definition.