Localization - Documentation | www.HtmlElements.com

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.