Smart HTML Elements

  • Demos
  • Docs
  • License
  • Download
  • Community
    • Forums
    • Blogs
    • Login
  • About
    • About Us
    • Contact Us
    • FAQ
new updated commercial

  • FrameworkFramework

  • HTML Accordion UI ElementAccordion

  • HTML Badge UI ElementBadge

  • HTML Button UI ElementButton

  • HTML Calendar UI ElementCalendar

  • HTML Card UI ElementCard

  • HTML Carousel UI ElementCarousel

  • HTML Checkbox UI ElementCheckbox

  • HTML ComboBox UI ElementComboBox

  • HTML DateTimePciker UI ElementDateTimePicker

  • HTML Docking Layout UI ElementDocking Layout

  • HTML DropDownList UI ElementDropDownList

  • HTML Grid UI ElementGrid

  • HTML Gauge UI ElementGauge

  • HTML ListBox UI ElementListBox

  • HTML ListMenu UI ElementListMenu

  • HTML MaskedTextBox UI ElementMaskedTextBox

  • HTML Menu UI ElementMenu

  • HTML MultilineTextBox UI ElementMultilineTextBox

  • HTML MultiSplitButton UI ElementMultiSplitButton

  • HTML NumericTextBox UI ElementNumericTextBox

  • HTML Pager UI ElementPager

  • HTML PasswordTextBox UI ElementPasswordTextBox

  • HTML PowerButton UI ElementPowerButton

  • HTML ProgressBar UI ElementProgressBar

  • HTML RadioButton UI ElementRadioButton

  • HTML RepeatButton UI ElementRepeatButton

  • HTML ScrollBar UI ElementScrollBar

  • HTML Slider UI ElementSlider

  • HTML Splitter UI ElementSplitter

  • HTML SwitchButton UI ElementSwitchButton

  • HTML Table UI ElementTable

  • HTML Tabs UI ElementTabs

  • HTML Tank UI ElementTank

  • HTML TextBox UI ElementTextBox

  • HTML TimePicker UI ElementTimePicker

  • HTML Toast UI ElementToast

  • HTML ToggleButton UI ElementToggleButton

  • HTML Tooltip UI ElementTooltip

  • HTML Tree UI ElementTree

  • HTML Window UI ElementWindow

  • HTML FrameworkFramework

  • Create Custom Element
  • Introduction
  • Overview
  • Loops. Render Table with smart-for
  • Declarative Rendering
  • Event Binding
  • Sub Property Two-Way Binding
  • Form Binding
  • Handling User Input
  • Form Checkbox Binding
  • Form Checkbox Binding to Array
  • Form DropDownList Binding
  • Form Radio Input Binding
  • Form TextBox Binding
  • HTML Elements Binding
  • HTML Checkbox input Model Binding
  • HTML Input Binding
  • HTML Checkbox Binding to Array
  • HTML Number Input Binding
  • HTML Radio Button Binding
  • HTML Select Binding
  • HTML Select Multiple Binding
  • Loops Rendering
  • List Rendering with smart-for
  • Advanced List Rendering with smart-for
  • Grid Layout System
  • Overview
  • Advanced
  • Equal Width
  • How it works
  • Layout with span
  • Nested Grid
  • No Gaps
  • Options
  • Ordering
  • Stacked to Horizontal
  • Stack Layout System
  • Overview
  • Gaps
  • Options
  • Spacing
  • Stretch
  • Uneven Stretch

  • HTML AccordionAccordion

  • Overview
  • Basic
  • Events
  • Methods
  • Expand Modes
  • In Tabs
  • With Tabs
  • Reorder

  • HTML BadgeBadge

  • Overview

  • HTML ButtonButton

  • Overview
  • Basic
  • Events
  • Images

  • HTML CardCard

  • Overview
  • Basic
  • Events

  • HTML CardCarousel

  • Overview
  • Auto Play
  • 3D
  • 3D Directions
  • 3D Template
  • Full Page
  • Template
  • Thumbnails
  • Cards

  • HTML CalendarCalendar

  • Overview
  • Classic Display Mode
  • Custom Header
  • Events
  • First Day Of Week
  • Footer
  • Hotel Showcase
  • Important Days
  • List Display View
  • Locale
  • Methods
  • Min/Max Date
  • Multiple Months
  • Navigation Modes
  • Restricted Dates
  • Right To Left
  • Views
  • Week Numbers
  • Weeks Visibility

  • HTML CheckBoxCheckBox

  • Overview
  • Basic
  • Events
  • Images

  • HTML ComboBoxComboBox

  • Overview
  • Auto Complete
  • Automatic Positioning
  • Basic
  • Button Position
  • Checkboxes
  • Multiple Selection Mode
  • Filterable
  • Item Template
  • Methods
  • Multiple Selection
  • Open Modes
  • Popup Resizing
  • Position
  • Token Template

  • HTML DateTimePickerDateTimePicker

  • Overview
  • Basic
  • Dropdown Display Mode
  • Dropdown position
  • Edit Modes
  • Formats
  • High Precision/Scientific
  • Localization
  • Time Zones

  • HTML DropDownListDropDownList

  • Overview
  • Auto Complete
  • Automatic Positioning
  • Basic
  • Button Position
  • Checkboxes
  • Multiple Selection Mode
  • Filterable
  • Item Template
  • Methods
  • Multiple Selection
  • Open Modes
  • Popup Resizing
  • Position
  • Token Template

  • HTML DropDownListDocking Layout

  • Overview
  • Auto Hide Item
  • Auto Save/Load
  • Drop Position
  • Insert Before/After Item
  • Insert Outside Target Group
  • Insert Top Level Item
  • Inside Window
  • Item Dock & Undock
  • Layout Item
  • Layout Item Group
  • Remove Item
  • Snap Modes
  • State
  • Update Item
  • Visual Studio Showcase

  • HTML GaugeGauge

  • Overview
  • Analog Display Type
  • Basic
  • Change Font Size
  • Coercion
  • Custom Interval
  • Custom Needle
  • Date Scale
  • Integer 64-bit
  • Logarithmic Scale
  • Mechanical Action
  • Size-Mode Auto
  • Styling
  • Tick label settings

  • HTML GridGrid

  • Overview
  • Auto Size
  • Merged Cells(RowSpan, ColSpan)
  • Checkbox Selection
  • Columns & Rows
  • Columns: CRUD
  • Rows: CRUD
  • Columns: Dynamic Width
  • Columns: Resize
  • Row Headers
  • Freeze Column
  • Freeze Last Column
  • Freeze First & Last Column
  • Freeze Rows
  • Freeze Far Rows
  • Freeze First & Last Row
  • Freeze Rows & Columns
  • Live Updates
  • Live Updates(1s)
  • Live Updates Performance(50ms)
  • Pagination
  • Pagination
  • Pagination: Options
  • Sort
  • Sort by One Column
  • Sort by Many Columns
  • Sort Animation
  • Scrolling
  • Scroll: Infinite
  • Scroll: Virtual
  • Scroll: Deferred

  • HTML LEDLED

  • Overview

  • HTML ListBoxListBox

  • Overview
  • Basic
  • Checkboxes
  • Custom Filtering
  • Editable Items
  • Filter
  • Grouping
  • Item Template
  • Lazy Loading
  • Methods
  • Radio Buttons
  • Reorder
  • Multiple Selection
  • Virtualization

  • HTML ListMenuListMenu

  • Overview
  • Basic
  • Data Source
  • Filterable
  • Grouped
  • Lazy Loading

  • HTML MaskedTextBoxMaskedTextBox

  • Overview
  • Basic
  • Cut, Copy & Paste
  • Hide Prompt char on Blur
  • Overwrite Mode
  • Prompt char
  • Validation

  • HTML MenuMenu

  • Overview
  • Add & Remove Items
  • Basic
  • Checkboxes
  • Context Menu
  • Data Source
  • Dropdown Position
  • Hidden Scroll Buttons
  • Items Layout
  • Items with Icons
  • Load from UL
  • Selection Mode
  • Tree Mode
  • Vertical Mode

  • HTML MultiSplitButtonMultiSplitButton

  • Overview
  • Basic
  • Button Group
  • Button Position
  • Checkboxes
  • Events

  • HTML MultilineTextBoxMultilineTextBox

  • Overview
  • Basic
  • Display Mode
  • Enter Key Behavior
  • Resizable
  • Scrollbars

  • HTML NumericTextBoxNumericTextBox

  • Overview
  • Basic
  • Complex Numbers
  • Floating-Point Numbers
  • Integer Numbers
  • Localization
  • Scientific Notation Numbers
  • Styling

  • HTML PagerPager

  • Overview
  • Basic
  • Events
  • Localization
  • Page Size Selector

  • HTML PasswordTextBoxPasswordTextBox

  • Overview
  • Basic
  • Custom Password Strength
  • Events
  • Password Icon
  • Strength
  • Localization
  • Strength Template

  • HTML PowerButtonPowerButton

  • Overview

  • HTML ProgressBarProgressBar

  • Overview
  • Barber Shop Style
  • Basic
  • Amazon Echo Style
  • Events
  • Methods
  • Nested Button

  • HTML RadioButtonRadioButton

  • Overview
  • Basic
  • Events
  • Images

  • HTML RepeatButtonRepeatButton

  • Overview

  • HTML ScrollBarScrollBar

  • Overview

  • HTML SliderSlider

  • Overview
  • Basic
  • Buttons
  • Click Coordinates
  • Coercion
  • Custom Interval
  • Date Scale
  • Integer Scale
  • Labels
  • Logarithmic Scale
  • Mechanical Action
  • Range Selection
  • Ticks On Track
  • Tooltip

  • HTML SplitterSplitter

  • Overview
  • Auto Sizing
  • Expand / Collapse
  • Events
  • Live Resize
  • Locked Items
  • Methods
  • Min / Max Item Size
  • Nested Splitters
  • Orientation
  • Resize Modes
  • Resize With Window

  • HTML SwitchButtonSwitchButton

  • Overview

  • HTML TableTable

  • Overview
  • Table Bordered
  • Table Dark Bordered
  • Table CRUD
  • Sort
  • Sort by Many Columns
  • Dark Table
  • Dark Head
  • Hover
  • Primary Head
  • Striped
  • Responsive Table

  • HTML TabsTabs

  • Overview
  • Auto Height
  • Badges
  • Basic
  • Close Buttons
  • Data Source
  • Grouping
  • Hidden Scroll Buttons
  • Insert, Remove, Update
  • Integration
  • Label Settings
  • Layout
  • Position
  • Reorder
  • Selection Mode
  • Styling
  • Title Template

  • HTML TankTank

  • Overview
  • Basic
  • Coercion
  • Custom Interval
  • Date Scale
  • Labels
  • Layout
  • Logarithmic Scale
  • Mechanical Action
  • Resizing on Label Change
  • Scientific Notation
  • Settings
  • Label Colors
  • Ticks On Track
  • Tooltip

  • HTML TextBoxTextBox

  • Overview
  • Auto Complete
  • Basic
  • Data Source Callback
  • Display Mode
  • Events

  • HTML TimePickerTimePicker

  • Overview
  • 24-hour Format
  • Auto Switch to Minutes
  • Basic
  • Footer
  • Landscape View
  • Settings

  • HTML ToastToast

  • Overview
  • Auto Close
  • Basic
  • Blink
  • Custom Container
  • Custom Icon
  • Events
  • Item Template
  • Modal
  • Settings

  • HTML ToggleButtonToggleButton

  • Overview

  • HTML TooltipTooltip

  • Overview
  • Absolute Position
  • Basic
  • Custom Arrow Position
  • Events
  • On Progress Bar

  • HTML TreeTree

  • Overview
  • Add / Remove Items
  • Connecting Lines
  • Custom Toggle Element
  • Data Source
  • Drag & Drop
  • Editable Labels
  • Filtering
  • Hierarchical Checkboxes
  • Item Template
  • Load on Demand
  • Move up/down
  • Scroll Modes
  • Selection Modes
  • Selection Display Modes
  • Sorting
  • State Maintenance

  • HTML WindowWindow

  • Overview
  • Basic
  • Custom Header Buttons
  • Events
  • Header Buttons
  • Header/Footer Template
  • Header Position
  • Inside Container
  • Methods
  • Minimization
  • Modal
  • Multiple Windows
  • Resizing
  • Snap Mode
  • Tabs
  • Window Types
  • Wait Window
Framework

Smart is Framework for building user interfaces

Source

Custom Elements Angular
index.js
index.htm
styles.css
app.component.ts
app.component.html
app.component.css
window.onload = function() {
	const app = new Smart.App(
		{
			data: {
				selected: ['A']
			}
		}
	)				
}

			
window.onload = function() {
	const app = new Smart.App(
		{
			data: {
				selected: ['A']
			}
		}
	)				
}
		

	
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>DropDownList Web Component data binding to Array and Smart-MODEL</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
	<link rel="stylesheet" type="text/css" href="../../source/styles/smart.default.css" />
	<link rel="stylesheet" type="text/css" href="styles.css" />
	<link rel="stylesheet" type="text/css" href="../../styles/demos.css" />
	<link rel="stylesheet" type="text/css" href="../../styles/common.css" />		
	<script src="../../source/smart.element.js"></script>
	<script src="../../source/smart.button.js"></script>
	<script src="../../source/smart.scrollbar.js"></script>
	<script src="../../source/smart.listbox.js"></script>
	<script src="../../source/smart.dropdownlist.js"></script>	
	<script src="index.js"></script>	
</head>
<body class="viewport">
	<div class="demo-description">
	DropDownList (bound to Array)
	</div>
	<br/>
	 <smart-drop-down-list selection-mode="checkBox" smart-model="selected">
		<smart-list-item value="A">A</smart-list-item>
		<smart-list-item value="B">B</smart-list-item>
		<smart-list-item value="C">C</smart-list-item>
	</smart-drop-down-list>
	<br/>
	<br/>
	Selected: <span>{{ selected }}</span>
</body>
</html>

	
		
					

	

	


Edit in CodePen


	

			

    






  

	

	

	  

		
Documentation & Learning Resources

		
    
		  
  • Getting Started
    • 
		  
  • CSS Styling and Appearance
    • 
		  
  • API Documentation
    • 
		

	  

	  
	

  















    

      

        
    
          
  • Demo
    • 
          
  • Download
    • 
          
  • Docs
    • 
          
  • License
    • 
          
  • Services
    • 
        

        
    
          
  • Forums
    • 
          
  • About
    • 
          
  • Terms of Use
    • 
          
  • Privacy Policy
    • 
          
  • Contact Us
    • 
        

      

      

        
    
          
    • 
          
    • 
        

      

      

        

          HTML Elements
		  
Smart HTML Elements © 2018-2019. All Rights Reserved.