carbon-components-angular

<!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>carbon-components-angular documentation</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="../images/favicon.ico"> <link rel="stylesheet" href="../styles/style.css"> <link rel="stylesheet" href="../styles/dark.css"> </head> <body> <div class="navbar navbar-default navbar-fixed-top d-block d-sm-none"> <a href="../" class="navbar-brand">carbon-components-angular documentation</a> <button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button> </div> <div class="xs-menu menu" id="mobile-menu"> <div id="book-search-input" role="search"><input type="text" placeholder="Type to search"></div> <compodoc-menu></compodoc-menu> </div> <div class="container-fluid main"> <div class="row main"> <div class="hidden-xs menu"> <compodoc-menu mode="normal"></compodoc-menu> </div>  <div class="content component"> <div class="content-data"> <ol class="breadcrumb"> <li class="breadcrumb-item">Components</li> <li class="breadcrumb-item" > Dropdown</li> </ol> <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a href="#info" class="nav-link active" role="tab" id="info-tab" data-bs-toggle="tab" data-link="info">Info</a> </li> <li class="nav-item"> <a href="#source" class="nav-link" role="tab" id="source-tab" data-bs-toggle="tab" data-link="source">Source</a> </li> <li class="nav-item"> <a href="#tree" class="nav-link" role="tab" id="tree-tab" data-bs-toggle="tab" data-link="dom-tree">DOM Tree</a> </li> </ul> <div class="tab-content"> <div class="tab-pane fade active in" id="info"><p class="comment"> <h3>File</h3> </p> <p class="comment"> <code>src/dropdown/dropdown.component.ts</code> </p> <p class="comment"> <h3>Description</h3> </p> <p class="comment"> <p>Drop-down lists enable users to select one or more items from a list.</p> <h4>Opening behavior/List DOM placement</h4> <p>By default the dropdown will try to figure out the best placement for the dropdown list.</p> <p>If it's not contained within any scrolling elements, it will open inline, if it <em>is</em> contained within a scrolling container it will try to open in the body, or an <code>cds-placeholder</code>.</p> <p>To control this behavior you can use the <code>appendInline</code> input:</p> <ul> <li><code>[appendInline]="null"</code> is the default (auto detection)</li> <li><code>[appendInline]="false"</code> will always append to the body/<code>cds-placeholder</code></li> <li><code>[appendInline]="true"</code> will always append inline (next to the dropdown button)</li> </ul> <p>Get started with importing the module:</p> <div><pre class="line-numbers"><code class="language-typescript">import { DropdownModule } from 'carbon-components-angular';</code></pre></div><p><a href="../../?path=/story/components-dropdown--basic">See demo</a></p> </p> <p class="comment"> <h3>Implements</h3> </p> <p class="comment"> <code>OnInit</code> <code>AfterContentInit</code> <code>AfterViewInit</code> <code>OnDestroy</code> <code>ControlValueAccessor</code> </p> <section data-compodoc="block-metadata"> <h3>Metadata</h3> <table class="table table-sm table-hover metadata"> <tbody> <tr> <td class="col-md-3">providers</td> <td class="col-md-9"> <code><a href="../components/Dropdown.html" target="_self" >{ provide: NG_VALUE_ACCESSOR, useExisting: Dropdown, multi: true }</a></code> </td> </tr> <tr> <td class="col-md-3">selector</td> <td class="col-md-9"><code>cds-dropdown, ibm-dropdown</code></td> </tr> <tr> <td class="col-md-3">template</td> <td class="col-md-9"><pre class="line-numbers"><code class="language-html"><label *ngIf="label && !skeleton" [for]="id" class="cds--label" [ngClass]="{'cds--label--disabled': disabled}"> <ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container> <ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template> </label> <div class="cds--list-box" [ngClass]="{ 'cds--dropdown': type !== 'multi', 'cds--multiselect': type === 'multi', 'cds--multi-select--selected': type === 'multi' && getSelectedCount() > 0, 'cds--dropdown--light': theme === 'light', 'cds--list-box--light': theme === 'light', 'cds--list-box--inline': inline, 'cds--skeleton': skeleton, 'cds--dropdown--disabled cds--list-box--disabled': disabled, 'cds--dropdown--invalid': invalid, 'cds--dropdown--warning cds--list-box--warning': warn, 'cds--dropdown--sm cds--list-box--sm': size === 'sm', 'cds--dropdown--md cds--list-box--md': size === 'md', 'cds--dropdown--lg cds--list-box--lg': size === 'lg', 'cds--list-box--expanded': !menuIsClosed }"> <button #dropdownButton [id]="id" type="button" class="cds--list-box__field" [ngClass]="{'a': !menuIsClosed}" [attr.aria-expanded]="!menuIsClosed" [attr.aria-disabled]="disabled" aria-haspopup="listbox" (click)="disabled ? $event.stopPropagation() : toggleMenu()" (blur)="onBlur()" [attr.disabled]="disabled ? true : null"> <div (click)="clearSelected()" (keydown.enter)="clearSelected()" *ngIf="type === 'multi' && getSelectedCount() > 0" class="cds--list-box__selection cds--tag--filter cds--list-box__selection--multi" tabindex="0" [title]="clearText"> {{getSelectedCount()}} <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" role="img" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path> </svg> </div> <span *ngIf="isRenderString()" class="cds--list-box__label">{{getDisplayStringValue() | async}}</span> <ng-template *ngIf="!isRenderString()" [ngTemplateOutletContext]="getRenderTemplateContext()" [ngTemplateOutlet]="displayValue"> </ng-template> <svg *ngIf="invalid" class="cds--dropdown__invalid-icon" cdsIcon="warning--filled" size="16"> </svg> <svg *ngIf="!invalid && warn" cdsIcon="warning--alt--filled" size="16" class="cds--list-box__invalid-icon cds--list-box__invalid-icon--warning"> </svg> <span class="cds--list-box__menu-icon"> <svg *ngIf="!skeleton" cdsIcon="chevron--down" size="16" [attr.aria-label]="menuButtonLabel" [ngClass]="{'cds--list-box__menu-icon--open': !menuIsClosed }"> </svg> </span> </button> <div #dropdownMenu [ngClass]="{ 'cds--list-box--up': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp }"> <ng-content *ngIf="!menuIsClosed"></ng-content> </div> </div> <div *ngIf="helperText && !invalid && !warn && !skeleton" class="cds--form__helper-text" [ngClass]="{ 'cds--form__helper-text--disabled': disabled }"> <ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container> <ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template> </div> <div *ngIf="invalid" class="cds--form-requirement"> <ng-container *ngIf="!isTemplate(invalidText)">{{ invalidText }}</ng-container> <ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template> </div> <div *ngIf="!invalid && warn" class="cds--form-requirement"> <ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container> <ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template> </div> </code></pre></td> </tr> </tbody> </table> </section> <section data-compodoc="block-index"> <h3 id="index">Index</h3> <table class="table table-sm table-bordered index-table"> <tbody> <tr> <td class="col-md-4"> <h6><b>Properties</b></h6> </td> </tr> <tr> <td class="col-md-4"> <ul class="index-list"> <li> <a href="#_dropUp" >_dropUp</a> </li> <li> <span class="modifier">Private</span> <a href="#_writtenValue" >_writtenValue</a> </li> <li> <span class="modifier"></span> <a href="#dropdownButton" >dropdownButton</a> </li> <li> <span class="modifier">Static</span> <a href="#dropdownCount" >dropdownCount</a> </li> <li> <span class="modifier"></span> <a href="#dropdownMenu" >dropdownMenu</a> </li> <li> <span class="modifier"></span> <a href="#hostClass" >hostClass</a> </li> <li> <a href="#keyboardNav" >keyboardNav</a> </li> <li> <a href="#menuIsClosed" >menuIsClosed</a> </li> <li> <a href="#noop" >noop</a> </li> <li> <span class="modifier">Protected</span> <a href="#onTouchedCallback" >onTouchedCallback</a> </li> <li> <a href="#outsideClick" >outsideClick</a> </li> <li> <a href="#outsideKey" >outsideKey</a> </li> <li> <a href="#propagateChange" >propagateChange</a> </li> <li> <span class="modifier"></span> <a href="#view" >view</a> </li> <li> <span class="modifier">Protected</span> <a href="#visibilitySubscription" >visibilitySubscription</a> </li> </ul> </td> </tr> <tr> <td class="col-md-4"> <h6><b>Methods</b></h6> </td> </tr> <tr> <td class="col-md-4"> <ul class="index-list"> <li> <a href="#_appendToBody" >_appendToBody</a> </li> <li> <a href="#_appendToDropdown" >_appendToDropdown</a> </li> <li> <a href="#_keyboardNav" >_keyboardNav</a> </li> <li> <a href="#_noop" >_noop</a> </li> <li> <a href="#_outsideClick" >_outsideClick</a> </li> <li> <a href="#_outsideKey" >_outsideKey</a> </li> <li> <a href="#_shouldDropUp" >_shouldDropUp</a> </li> <li> <span class="modifier">Protected</span> <a href="#checkForReorder" >checkForReorder</a> </li> <li> <a href="#clearSelected" >clearSelected</a> </li> <li> <a href="#closedDropdownNavigation" >closedDropdownNavigation</a> </li> <li> <a href="#closeMenu" >closeMenu</a> </li> <li> <a href="#getDisplayStringValue" >getDisplayStringValue</a> </li> <li> <a href="#getRenderTemplateContext" >getRenderTemplateContext</a> </li> <li> <a href="#getSelectedCount" >getSelectedCount</a> </li> <li> <a href="#isRenderString" >isRenderString</a> </li> <li> <span class="modifier">Public</span> <a href="#isTemplate" >isTemplate</a> </li> <li> <a href="#ngAfterContentInit" >ngAfterContentInit</a> </li> <li> <a href="#ngAfterViewInit" >ngAfterViewInit</a> </li> <li> <a href="#ngOnDestroy" >ngOnDestroy</a> </li> <li> <a href="#ngOnInit" >ngOnInit</a> </li> <li> <a href="#onBlur" >onBlur</a> </li> <li> <span class="modifier"></span> <a href="#onKeyDown" >onKeyDown</a> </li> <li> <a href="#openMenu" >openMenu</a> </li> <li> <a href="#registerOnChange" >registerOnChange</a> </li> <li> <a href="#registerOnTouched" >registerOnTouched</a> </li> <li> <a href="#setDisabledState" >setDisabledState</a> </li> <li> <a href="#toggleMenu" >toggleMenu</a> </li> <li> <a href="#valueSelected" >valueSelected</a> </li> <li> <a href="#writeValue" >writeValue</a> </li> </ul> </td> </tr> <tr> <td class="col-md-4"> <h6><b>Inputs</b></h6> </td> </tr> <tr> <td class="col-md-4"> <ul class="index-list"> <li> <a href="#appendInline" >appendInline</a> </li> <li> <a href="#clearText" >clearText</a> </li> <li> <a href="#disableArrowKeys" >disableArrowKeys</a> </li> <li> <a href="#disabled" >disabled</a> </li> <li> <a href="#displayValue" >displayValue</a> </li> <li> <a href="#dropUp" >dropUp</a> </li> <li> <a href="#helperText" >helperText</a> </li> <li> <a href="#id" >id</a> </li> <li> <a href="#inline" >inline</a> </li> <li> <a href="#invalid" >invalid</a> </li> <li> <a href="#invalidText" >invalidText</a> </li> <li> <a href="#itemValueKey" >itemValueKey</a> </li> <li> <a href="#label" >label</a> </li> <li> <a href="#menuButtonLabel" >menuButtonLabel</a> </li> <li> <a href="#placeholder" >placeholder</a> </li> <li> <a href="#scrollableContainer" >scrollableContainer</a> </li> <li> <a href="#selectedLabel" >selectedLabel</a> </li> <li> <a href="#selectionFeedback" >selectionFeedback</a> </li> <li> <a href="#size" >size</a> </li> <li> <a href="#skeleton" >skeleton</a> </li> <li> <a href="#theme" class="deprecated-name">theme</a> </li> <li> <a href="#type" >type</a> </li> <li> <a href="#warn" >warn</a> </li> <li> <a href="#warnText" >warnText</a> </li> </ul> </td> </tr> <tr> <td class="col-md-4"> <h6><b>Outputs</b></h6> </td> </tr> <tr> <td class="col-md-4"> <ul class="index-list"> <li> <a href="#close" >close</a> </li> <li> <a href="#onClose" >onClose</a> </li> <li> <a href="#selected" >selected</a> </li> </ul> </td> </tr> <tr> <td class="col-md-4"> <h6><b>HostBindings</b></h6> </td> </tr> <tr> <td class="col-md-4"> <ul class="index-list"> <li> <a href="#class.cds--dropdown__wrapper" >class.cds--dropdown__wrapper</a> </li> </ul> </td> </tr> <tr> <td class="col-md-4"> <h6><b>HostListeners</b></h6> </td> </tr> <tr> <td class="col-md-4"> <ul class="index-list"> <li> <a href="#keydown" >keydown</a> </li> </ul> </td> </tr> <tr> <td class="col-md-4"> <h6><b>Accessors</b></h6> </td> </tr> <tr> <td class="col-md-4"> <ul class="index-list"> <li> <a href="#writtenValue" >writtenValue</a> </li> </ul> </td> </tr> </tbody> </table> </section> <section data-compodoc="block-constructor"> <h3 id="constructor">Constructor</h3> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <code>constructor(elementRef: ElementRef, i18n: <a href="../injectables/I18n.html" target="_self">I18n</a>, dropdownService: <a href="../injectables/DropdownService.html" target="_self">DropdownService</a>, elementService: <a href="../injectables/ElementService.html" target="_self">ElementService</a>)</code> </td> </tr> <tr> <td class="col-md-4"> <div class="io-line">Defined in <a href="" data-line="340" class="link-to-prism">src/dropdown/dropdown.component.ts:340</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Creates an instance of Dropdown.</p> </div> <div> <b>Parameters :</b> <table class="params"> <thead> <tr> <td>Name</td> <td>Type</td> <td>Optional</td> </tr> </thead> <tbody> <tr> <td>elementRef</td> <td> <code>ElementRef</code> </td> <td> No </td> </tr> <tr> <td>i18n</td> <td> <code><a href="../injectables/I18n.html" target="_self" >I18n</a></code> </td> <td> No </td> </tr> <tr> <td>dropdownService</td> <td> <code><a href="../injectables/DropdownService.html" target="_self" >DropdownService</a></code> </td> <td> No </td> </tr> <tr> <td>elementService</td> <td> <code><a href="../injectables/ElementService.html" target="_self" >ElementService</a></code> </td> <td> No </td> </tr> </tbody> </table> </div> </td> </tr> </tbody> </table> </section> <section data-compodoc="block-inputs"> <h3 id="inputs">Inputs</h3> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="appendInline"></a> <b>appendInline</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code> </td> </tr> <tr> <td class="col-md-4"> <i>Default value : </i><code>null</code> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <a href="" data-line="251" class="link-to-prism">src/dropdown/dropdown.component.ts:251</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>set to <code>true</code> to place the dropdown view inline with the component</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="clearText"></a> <b>clearText</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code> </td> </tr> <tr> <td class="col-md-4"> <i>Default value : </i><code>this.i18n.get().DROPDOWN.CLEAR</code> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <a href="" data-line="201" class="link-to-prism">src/dropdown/dropdown.component.ts:201</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Sets the optional clear button tooltip text.</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="disableArrowKeys"></a> <b>disableArrowKeys</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code> </td> </tr> <tr> <td class="col-md-4"> <i>Default value : </i><code>false</code> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <a href="" data-line="231" class="link-to-prism">src/dropdown/dropdown.component.ts:231</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Set to <code>true</code> for a dropdown without arrow key activation.</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="disabled"></a> <b>disabled</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code> </td> </tr> <tr> <td class="col-md-4"> <i>Default value : </i><code>false</code> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <a href="" data-line="219" class="link-to-prism">src/dropdown/dropdown.component.ts:219</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Set to <code>true</code> to disable the dropdown.</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="displayValue"></a> <b>displayValue</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code>string | TemplateRef<any></code> </td> </tr> <tr> <td class="col-md-4"> <i>Default value : </i><code>""</code> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <a href="" data-line="197" class="link-to-prism">src/dropdown/dropdown.component.ts:197</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>The selected value from the <code>Dropdown</code>. Can be a string or template.</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="dropUp"></a> <b>dropUp</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <a href="" data-line="281" class="link-to-prism">src/dropdown/dropdown.component.ts:281</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Overrides the automatic dropUp.</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="helperText"></a> <b>helperText</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code>string | TemplateRef<any></code> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <a href="" data-line="189" class="link-to-prism">src/dropdown/dropdown.component.ts:189</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Sets the optional helper text.</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="id"></a> <b>id</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code> </td> </tr> <tr> <td class="col-md-4"> <i>Default value : </i><code>`dropdown-${Dropdown.dropdownCount++}`</code> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <a href="" data-line="181" class="link-to-prism">src/dropdown/dropdown.component.ts:181</a></div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="inline"></a> <b>inline</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code> </td> </tr> <tr> <td class="col-md-4"> <i>Default value : </i><code>false</code> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <a href="" data-line="227" class="link-to-prism">src/dropdown/dropdown.component.ts:227</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Set to <code>true</code> for an inline dropdown.</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="invalid"></a> <b>invalid</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code> </td> </tr> <tr> <td class="col-md-4"> <i>Default value : </i><code>false</code> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <a href="" data-line="235" class="link-to-prism">src/dropdown/dropdown.component.ts:235</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Set to <code>true</code> for invalid state.</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="invalidText"></a> <b>invalidText</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code>string | TemplateRef<any></code> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <a href="" data-line="239" class="link-to-prism">src/dropdown/dropdown.component.ts:239</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Value displayed if dropdown is in invalid state.</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="itemValueKey"></a> <b>itemValueKey</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <a href="" data-line="260" class="link-to-prism">src/dropdown/dropdown.component.ts:260</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Specifies the property to be used as the return value to <code>ngModel</code></p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="label"></a> <b>label</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code>string | TemplateRef<any></code> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <a href="" data-line="185" class="link-to-prism">src/dropdown/dropdown.component.ts:185</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Label for the dropdown.</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="menuButtonLabel"></a> <b>menuButtonLabel</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code> </td> </tr> <tr> <td class="col-md-4"> <i>Default value : </i><code>this.i18n.get().DROPDOWN.OPEN</code> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <a href="" data-line="272" class="link-to-prism">src/dropdown/dropdown.component.ts:272</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Accessible label for the button that opens the dropdown list. Defaults to the <code>DROPDOWN.OPEN</code> value from the i18n service.</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="placeholder"></a> <b>placeholder</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code> </td> </tr> <tr> <td class="col-md-4"> <i>Default value : </i><code>""</code> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <a href="" data-line="193" class="link-to-prism">src/dropdown/dropdown.component.ts:193</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Value displayed if no item is selected.</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="scrollableContainer"></a> <b>scrollableContainer</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <a href="" data-line="256" class="link-to-prism">src/dropdown/dropdown.component.ts:256</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Query string for the element that contains the <code>Dropdown</code>. Used to trigger closing the dropdown if it scrolls outside of the viewport of the <code>scrollableContainer</code>.</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="selectedLabel"></a> <b>selectedLabel</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code> </td> </tr> <tr> <td class="co