{"componentChunkName":"component---src-templates-angulardocs-js","path":"/docs/contrast/angular/components/multiselect","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"46e5ae44-db20-5ed9-8bb7-5fdc6aed221d","title":"Multiselect","slug":"/contrast/angular/components/multiselect"},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Multiselect\",\n  \"metaTitle\": \"Multiselect Component for Contrast Bootstrap Angular\",\n  \"metaDescription\": \"Angular Bootstrap Multiselect is a form control, that after the click displays a collapsable list of multiple values which can be used in forms, menus or surveys\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Multiselect\"), mdx(\"p\", null, \"Angular Bootstrap Multiselect is a form control, that after the click displays a collapsable list of multiple values which can be used in forms, menus or surveys.\"), mdx(\"p\", null, \"Multiselect enables you to use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"\\u2191\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"\\u2193\"), \" arrow keys to navigate through options and use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"\\u21B5\"), \" key to select required option.\"), mdx(\"i\", null), mdx(\"h2\", null, \"Basic Multiselect\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"395px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/a4b3d23f0388790e9262d4b68313c667/2cb6c/multiselect1.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"76.06177606177606%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAABJ0AAASdAHeZh94AAAB3klEQVQ4y41T227TQBDN5/AGqD+GgAISP4Oqqp/REqiC8hCkNEZp4zo2DUpMGl93fb8cZtYJaUJNM9LZ8exYZ+faqUFSl3QU/0VZFsjzAkVB+gGUnefkZw6gU1cl7FUIzZQEgR8MS6jvh7YfRojjGFEU/QO+F0Io8g6/fnoR4NkriaN3Ai+PBV68FTh6L/B8rfn+u1mpCFRGj0iapgqK8PMwwJuTFB/PYnw4jfH6kyTd4PhEKtuwOfWKUqtQVbtgSZKkIazqGkkcQvq/EYcrpNJFlYWoc4kqF6QJhUAcCYQhQaz1GpxqEATwfB81cXX4SNMMt4YB/dbEyvFQNo+2prcv3JDlcqmi7bDheb4qrhTbF8MwVNp13SfhOA5s21bEKsLJZIKL83P0et9w+fULLns9dLtd9Pt98unK3wZd1zEejzEajZoI+TBNE4PBAMPhEFdXhJH21zamUxhUjjZMyc/EmqZtU+YOZVmmwEOa55maKfY19uPg/5uSebsRJjSY/JJO6f2a3eH65gZ3sxkOFSnllpBf2KzNvnB9nwILN3InQl4dbruvuupQ11zV9Q1pm7QScg0XiwXm8zls0pb1E/f3q4Oi3GyJZVnN2DAh12B/2fmOZ/EQ+LQlPIvM9Qd1d21RMYbHnQAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/a4b3d23f0388790e9262d4b68313c667/2cb6c/multiselect1.png\",\n    \"srcSet\": [\"/static/a4b3d23f0388790e9262d4b68313c667/a2ead/multiselect1.png 259w\", \"/static/a4b3d23f0388790e9262d4b68313c667/2cb6c/multiselect1.png 395w\"],\n    \"sizes\": \"(max-width: 395px) 100vw, 395px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"<CDBMultiselect [options]='option' selected=\\\"Value\\\"></CDBMultiselect>\\n\")), mdx(\"h6\", null, \"typescript\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import { Component, OnInit } from '@angular/core';\\n\\n@Component({\\n  selector: 'app-multiselect',\\n  templateUrl: './multiselect.component.html',\\n  styleUrls: ['./multiselect.component.scss'],\\n})\\nexport class MultiselectComponent implements OnInit {\\n  option = [\\n    {\\n      text: 'Value 1',\\n      showing: true,\\n    },\\n    {\\n      text: 'Second Value',\\n      showing: true,\\n    },\\n    {\\n      text: 'Third Value',\\n      showing: true,\\n    },\\n    {\\n      text: 'Final Value',\\n      showing: true,\\n    },\\n  ];\\n\\n  selectOptions = [\\n    {\\n      text: 'Value 1',\\n      showing: true,\\n    },\\n    {\\n      text: 'Second Value',\\n      showing: true,\\n    },\\n    {\\n      text: 'Third Value',\\n      showing: true,\\n    },\\n    {\\n      text: 'Final Value',\\n      showing: true,\\n    },\\n  ];\\n\\n  constructor() {}\\n\\n  ngOnInit(): void {}\\n}\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Multiselect with Search\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"392px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/c951ff04e076d88d3316b5ce8e2f7b91/0acb4/multiselect2.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"42.471042471042466%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAABJ0AAASdAHeZh94AAABFUlEQVQoz5VRwUrDQBDNR3ry5sW7Jy89+Q/ePHvRqheRqgdFFEEoWKRIqiDVbENTmm422U03u3nubPBUNHXgMTA78+a92cDaGoDFalhorVFVVSu0bjJFQIP9xw9cHIW4PAlxdTpC7zjE62CCpVbI8wJF0Y75PAWJC4j1cH+AnY1b7G0/oLN1j93NO3QPXvCfIFJrbaPw+WmM67M33Jy/e/S6IUbDKSqzdI0SUqo/IKGUAucctnYKjTGoYVY2Uo0GyrKE+g2q9O+5U0eE/oYkky8WiCKGeBIjYjE+x18QmVjbLolK07SxTL8jhMBsliBJEkwdGGPgWeYb2n6YyMg2zXpCKhRS+uIP6CZ0ZFq0Dsgu5drd8BvtgGOx6RbJ+gAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/c951ff04e076d88d3316b5ce8e2f7b91/0acb4/multiselect2.png\",\n    \"srcSet\": [\"/static/c951ff04e076d88d3316b5ce8e2f7b91/a2ead/multiselect2.png 259w\", \"/static/c951ff04e076d88d3316b5ce8e2f7b91/0acb4/multiselect2.png 392w\"],\n    \"sizes\": \"(max-width: 392px) 100vw, 392px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"<CDBMultiselect color=\\\"secondary\\\" [search]=true [options]='option' selected=\\\"Value\\\"></CDBMultiselect>\\n\")), mdx(\"h6\", null, \"typescript\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import { Component, OnInit } from '@angular/core';\\n\\n@Component({\\n  selector: 'app-multiselect',\\n  templateUrl: './multiselect.component.html',\\n  styleUrls: ['./multiselect.component.scss'],\\n})\\nexport class MultiselectComponent implements OnInit {\\n  option = [\\n    {\\n      text: 'Value 1',\\n      showing: true,\\n    },\\n    {\\n      text: 'Second Value',\\n      showing: true,\\n    },\\n    {\\n      text: 'Third Value',\\n      showing: true,\\n    },\\n    {\\n      text: 'Final Value',\\n      showing: true,\\n    },\\n  ];\\n\\n  selectOptions = [\\n    {\\n      text: 'Value 1',\\n      showing: true,\\n    },\\n    {\\n      text: 'Second Value',\\n      showing: true,\\n    },\\n    {\\n      text: 'Third Value',\\n      showing: true,\\n    },\\n    {\\n      text: 'Final Value',\\n      showing: true,\\n    },\\n  ];\\n\\n  constructor() {}\\n\\n  ngOnInit(): void {}\\n}\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Multiselect with Submit Option\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"395px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/aa291b8777200fd48e67c44f335d4031/2cb6c/multiselect3.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"76.44787644787644%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAABJ0AAASdAHeZh94AAACCElEQVQ4y51TyXLaQBDVkQJcxA4V/4X9cRSbuHCMT9ycTwhLxfdQZfkABXeHHZsIEJiwmVUChHiZbkr44tg4U/VGo57Wmzf9WtJut8P/Dvp2s9kImNhutxyTaCoUiojH40gmk0ilUvgu1srdHX7c3CCRSHA8mUzxM0FrkUP5zWaTyZbLJWazGa+Z8OvVFSRJgtfrhcPhwPn5F1xeXODT6Rk8Hg+cLhecTifOPntx4j4R8VO43S58u74+qF2v11itVnvCn+k0/H4/otEowuEwAoEAYrEY5EgEsiwjJGLBYBBhOYKIiIVCIfh8PuRyOei6zpjP50wqWZYF09xwcCUC1gdqSjUkEvvK9C7RRFIbjw9QRU2enyfYWR8zigzp9/sgcZJpmhiNRiyZTplMJvw+Ho/5ORgM3kWv14OmaXtCmsqlEtKijplMBoqiIJvNQrm9RT6fR61WQ7Va/Sdov1gsik4p7K9Mcsl+CpTLZVQqFU78dX+PkjhIVdU3Qd/W63XOPRCSIYvFgmtpGAbDNLecQCV5C5RD5SGVTEhXJiK18YDHxm+0mior1Drdo02ZTqcvhKTQ/m1ea4v3QIOMPNSQFOpLXbjUxh9hfbfTgdZui1NnR/WhrfBQQyI0jJWwv4/hcMit8vTUFadOOYH2Ca+pozgNauxWq/XSNmQIBW3YJtHJx4CubP8pfwHOZjzajKxXFQAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/aa291b8777200fd48e67c44f335d4031/2cb6c/multiselect3.png\",\n    \"srcSet\": [\"/static/aa291b8777200fd48e67c44f335d4031/a2ead/multiselect3.png 259w\", \"/static/aa291b8777200fd48e67c44f335d4031/2cb6c/multiselect3.png 395w\"],\n    \"sizes\": \"(max-width: 395px) 100vw, 395px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"<CDBMultiselect color=\\\"dark\\\" [submit]=true [options]='option' selected=\\\"Value\\\" ></CDBMultiselect>\\n\")), mdx(\"h6\", null, \"typescript\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import { Component, OnInit } from '@angular/core';\\n\\n@Component({\\n  selector: 'app-multiselect',\\n  templateUrl: './multiselect.component.html',\\n  styleUrls: ['./multiselect.component.scss'],\\n})\\nexport class MultiselectComponent implements OnInit {\\n  option = [\\n    {\\n      text: 'Value 1',\\n      showing: true,\\n    },\\n    {\\n      text: 'Second Value',\\n      showing: true,\\n    },\\n    {\\n      text: 'Third Value',\\n      showing: true,\\n    },\\n    {\\n      text: 'Final Value',\\n      showing: true,\\n    },\\n  ];\\n\\n  selectOptions = [\\n    {\\n      text: 'Value 1',\\n      showing: true,\\n    },\\n    {\\n      text: 'Second Value',\\n      showing: true,\\n    },\\n    {\\n      text: 'Third Value',\\n      showing: true,\\n    },\\n    {\\n      text: 'Final Value',\\n      showing: true,\\n    },\\n  ];\\n\\n  constructor() {}\\n\\n  ngOnInit(): void {}\\n}\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Multiselect with Limited Options\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"383px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/b4b4a87a7eeee4399c46933924a9ed37/d0c94/multiselect4.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"55.21235521235521%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABJ0AAASdAHeZh94AAABuElEQVQoz5WTTYvTUBSGAyPCgEJdDiriiCguXfgb/A3+CwUdx4XiNygojlNRdERBRMGVuzqLjisHunYo9GMxzU2TtJPWNkmbNOnjuRlGhy5svfDkJOe+vNz3HmKkaUoCpP9g2r5mNBoxHo8x/CjG/vwedfMy1r3rWPeXpS6hbl/FenADe+Uh9qunqFtXsO4u7aI1UtWda6Jdxsk/otvtEg4GGIG4O5cu0sgZqNOHMY8dQJ09QmPByKp1LkfzwiLmiYOYJ+cxF+dpHJ1DnclhHp/DPHUI+/wC8XC4axjGMTuFr7gvHtN6u0rr9QrttVXa+l1OtvNxDe/LB+k/k15e9p7TerOnydN6+QTv0zv8IGAgpkYi2aN9dxULw/9kIHQ6HZIkEUN59H91Mbe3absuPbkLxmKf7mPye4KxeHieRxRFGHo6vu9jWRaO4xIEIXrpic26tFYPJTMMJLtSCldO5zgOtm3TbDYzdH8WtFZHzgzDMKRUKrG+/o1iscjGxncKhQI/Njep1WpUKpWp1Ov1v5F1XN0sl8t/2Nr6mdVqtTqVPUOdLjPMhtLvZ/c4ie7PQq/Xy/T6r/sNuUMOzc+k2ZcAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/b4b4a87a7eeee4399c46933924a9ed37/d0c94/multiselect4.png\",\n    \"srcSet\": [\"/static/b4b4a87a7eeee4399c46933924a9ed37/a2ead/multiselect4.png 259w\", \"/static/b4b4a87a7eeee4399c46933924a9ed37/d0c94/multiselect4.png 383w\"],\n    \"sizes\": \"(max-width: 383px) 100vw, 383px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"<CDBMultiselect color=\\\"danger\\\" [limitedOptions]=true [options]='option' selected=\\\"Value\\\" ></CDBMultiselect>\\n\")), mdx(\"h6\", null, \"typescript\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import { Component, OnInit } from '@angular/core';\\n\\n@Component({\\n  selector: 'app-multiselect',\\n  templateUrl: './multiselect.component.html',\\n  styleUrls: ['./multiselect.component.scss'],\\n})\\nexport class MultiselectComponent implements OnInit {\\n  option = [\\n    {\\n      text: 'Value 1',\\n      showing: true,\\n    },\\n    {\\n      text: 'Second Value',\\n      showing: true,\\n    },\\n    {\\n      text: 'Third Value',\\n      showing: true,\\n    },\\n    {\\n      text: 'Final Value',\\n      showing: true,\\n    },\\n  ];\\n\\n  selectOptions = [\\n    {\\n      text: 'Value 1',\\n      showing: true,\\n    },\\n    {\\n      text: 'Second Value',\\n      showing: true,\\n    },\\n    {\\n      text: 'Third Value',\\n      showing: true,\\n    },\\n    {\\n      text: 'Final Value',\\n      showing: true,\\n    },\\n  ];\\n\\n  constructor() {}\\n\\n  ngOnInit(): void {}\\n}\\n\")), mdx(\"h1\", null, \"API\"), mdx(\"p\", null, \"Here in this section you will find information about required modules and available inputs, outputs, methods and events of this component.\"), mdx(\"h2\", null, \"Contrast Multiselect Bootstrap Modules used\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import {MultiselectModule } from 'cdbangular';\\n\")), mdx(\"p\", null, \"API Reference: Contrast Multiselect Inputs\"), mdx(\"p\", null, \"The table below shows the possible input of the Multiselect component.\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"Name\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Type\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Default\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Description\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Example\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"class\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom classes\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"class=\\\"myClass\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"search\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Search element will appear as the first child of select.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"search=true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"color\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"primary\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets colorful hover effect on select options.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"color=\\\"secondary\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"options\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"array of objects\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets options array as source of data. This property is used in alternative Select version.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"[options]\", \"='option'\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"selected\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Set default select text content.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"selected=\\\"choose_option\\\"\")))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#multiselect","title":"Multiselect","items":[{"url":"#basic-multiselect","title":"Basic Multiselect","items":[{"items":[{"items":[{"items":[{"url":"#html","title":"html"},{"url":"#typescript","title":"typescript"}]}]}]}]},{"url":"#multiselect-with-search","title":"Multiselect with Search","items":[{"items":[{"items":[{"items":[{"url":"#html-1","title":"html"},{"url":"#typescript-1","title":"typescript"}]}]}]}]},{"url":"#multiselect-with-submit-option","title":"Multiselect with Submit Option","items":[{"items":[{"items":[{"items":[{"url":"#html-2","title":"html"},{"url":"#typescript-2","title":"typescript"}]}]}]}]},{"url":"#multiselect-with-limited-options","title":"Multiselect with Limited Options","items":[{"items":[{"items":[{"items":[{"url":"#html-3","title":"html"},{"url":"#typescript-3","title":"typescript"}]}]}]}]}]},{"url":"#api","title":"API","items":[{"url":"#contrast-multiselect-bootstrap-modules-used","title":"Contrast Multiselect Bootstrap Modules used"}]}]},"parent":{"__typename":"File","relativePath":"contrast/angular/components/multiselect.md"},"frontmatter":{"metaTitle":"Multiselect Component for Contrast Bootstrap Angular","metaDescription":"Angular Bootstrap Multiselect is a form control, that after the click displays a collapsable list of multiple values which can be used in forms, menus or surveys"}},"allMdx":{"edges":[{"node":{"fields":{"slug":"/contrast/angular/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/angular/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/javascript/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/javascript/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/react/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/react/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/react/chart","title":"Charts"}}},{"node":{"fields":{"slug":"/contrast/react/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/react/custom_pages","title":"Custom Pages"}}},{"node":{"fields":{"slug":"/contrast/angular/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/angular/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/angular/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/angular/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/angular/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/angular/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/angular/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/angular/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/angular/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/angular/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/angular/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/angular/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/angular/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/angular/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/angular/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/angular/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/angular/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/angular/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/angular/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/angular/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/angular/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/angular/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar2","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/angular/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/angular/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/angular/table/fixed_datatables","title":"Fixed DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/popover","title":"PopOver"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/components/alert","title":"React Alert"}}},{"node":{"fields":{"slug":"/contrast/react/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/react/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/react/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/react/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/react/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/react/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/react/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/react/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/react/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/react/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/react/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/react/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/react/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/react/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/react/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/react/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/react/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/react/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/react/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/react/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/react/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/react/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/react/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/react/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/react/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/react/components/smoothscroll","title":"SmoothScroll"}}},{"node":{"fields":{"slug":"/contrast/react/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/react/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/react/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/sidebar","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/react/sections/fileuploader","title":"FileUploader"}}},{"node":{"fields":{"slug":"/contrast/react/sections/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/react/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/react/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/react/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/bootstrap-5-major-changes","title":"Major changes to bootstrap 5"}}},{"node":{"fields":{"slug":"/bootstrap-5-navbar-using-contrast","title":"How To Create A Beautiful Navbar Using Bootstrap And Contrast"}}},{"node":{"fields":{"slug":"/using-bootstrap-in-react","title":"How to use Bootstrap in React Using a React Library"}}}]}},"pageContext":{"id":"46e5ae44-db20-5ed9-8bb7-5fdc6aed221d"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}