Crestron Components Lib - Showcase App

Component Configuration: template variables for ch5-select

Component Configuration (click to expand) 
{
  "attributes":{
    "id":{
      "volume1":{
        "size":"4",
        "noneSelectedPrompt":"Please select an option"
      }
    }
  },
  "templatevariables": {
    "id": {
      "volume1": [
        {"label":"Down", "fa-icon": "volume-down"},
        {"label":"Up", "fa-icon": "volume-up"},
        {"label":"Mute", "fa-icon": "volume-off"},
        {"label":"Speaker", "fa-icon": "phone-volume"}
      ]
    }
  }
}

Press the Load button to load the configuration.

Ch5 components can be preconfigured with default values for attributes and for templatevariables. The configuration can be done using Ch5Config and its methods:

  • loadConfig(config:TCh5Config) loads a new configuration and overrides the existing one.
  • setAttributeForId(elementId:string, attributeName:string, attributeValue:string) sets an attributeValue for an attributeName of the specified HTML elementId
  • setAttributeForComponent(componentName:string, attributeName:string, attributeValue:string) sets an attributeValue for an attributeName of the specified ch5 component (componentName)
  • setTemplateVarsForId(elementId:string, tempVarsItems:any[]) sets the template variables for the ch5 component having the specified elementId
  • getConfig() returns the current configuration object
  • getAttributesForId(elementId:string):TCh5ConfigAttributes returns the configrued attributes for the component having the specified elementId
  • getAttributesForComponent(componentName:string):TCh5ConfigAttributes returns all configured attributes for the component specified in componentName ( for example 'ch5-button')
  • getTemplateVarsForElementById(elementId:string):TCh5ConfigTemplateVars[] returns the configured template variables for the component having the specified elementId
  • getAttributesForElement(cr:Ch5Common):TCh5ConfigAttributes returns all configured attributes for a ch5 component
  • getTemplateVarsForElement(cr:Ch5Common):TCh5ConfigTemplateVars[] returns all configured templatevariables for a ch5 component 


type TCh5ConfigAttributes={
    [attrName:string]: string
}
type TCh5ConfigTemplateVars={
    [varName:string]: string
}
type TCh5Config={
    "attributes": {
        "id": {
            [id:string]:TCh5ConfigAttributes
        },
        "component": {
            [component:string]:TCh5ConfigAttributes
        }
    },
    "templatevariables": {
        "id": {
            [id:string]:TCh5ConfigTemplateVars[]
        }
    }
}

Component configuration: template variables for ch5-select

<div class="row">
    
        <ch5-select id="volume1">
            <template>
                <ch5-select-option>
                    <i class="fas fa-{{fa-icon}}"></i>
                    <span>{{label}}</span>
                </ch5-select-option>
            </template>
        </ch5-select>
    

</div>