Angular Material Select

Angular Material Select: <md-select> is used to create select box in Angular Material. This component is used within the <md-input-container> or it can be used standalone by using the class <md-no-underline>. Here in this tutorial we are going to explain how you can use <md-select> to create select dropdown. –

Angular Material Select Box Dropdown List Example

Let us create first select box to understand the how it works-

  <md-content layout-padding="">  
        <md-select ng-model="actionModel">
            <md-option><em>None</em></md-option>
            <md-option ng-value="1">Enable</md-option>
            <md-option ng-value="2">Disable<md-option>            
            <md-option ng-value="3">Delete</md-option>
          </md-option></md-option></md-select>
  </md-content>

In the above example we have created very basic select box using md-select and md-option directive. However you can use this for static select dropdown list where you don’t need Dynamic options.

If you run the above example it will produce output something like this –

Options Available

Following Options are available which you can use as per your requirement-

• * ng-model(expression):The model to init.
• 
  multiple(boolean):
  This is used to enable mulselection.
• 
  md-on-close(expression):
  Expression is evaluated when close event is fired.
• 
  md-on-open(expression):
  Expression to be evaluated when opening the select. Will hide the select options and show a spinner until the evaluated promise resolves.
• 
  md-selected-text(expression):
  This Expression is evaluated and will return a string as a placeholder when closed.
• 
  placeholder(string):
  Used to add placeholder.
• 
  md-no-asterisk(boolean):
  Asterisk will not be appended to the floating label if it is set to true.
• 
  aria-label(string):
  Label for accessibility.
• 
  md-container-class(string):
  If you want custom styling then you can use this to apply to the class to .md-select-menu-container element.

Dynamic Select Dropdown Using Object

It is very simple to create dynamic Select Dropdown Box. Here is an example –

  
   
      
      
      
      
      
      
	  
	 
      
      
   
   
  <div ng-controller="MyController as ctrl" ng-cloak=""> 
  <md-content layout-padding="">  
    <md-select ng-model="usersModel">
    <md-option ng-value="user" ng-repeat="user in users">{{ user.name }}</md-option>
  </md-select>
  </md-content>
  </div>
  
                                                                                                                                                                                                                                                               

Thus you can create any dynamic dropdown list, You can also fetch data from database and format them to display in dropdown list.

Angular Material Multiselect DropDown List | Multi Select Box

Sometimes we need multiselect dropdown menu, Angular Materiala provides (multiple) attribute which enables you to select multiple options from the list. Here is an example of multiple select dropdown example-

  <md-select ng-model="usersModel" multiple="multiple">
    <md-option ng-value="user" ng-repeat="user in users">{{ user.name }}</md-option>
  </md-select>

In the above example we have added attribute multiple which enables us to select multiple options from dropdown list

If you run the above example it will produce the output something like this –