Create a dropdown component

Question

I want to create a dropdown menu using Angular 2  but I m not sure how to do it in the  Angular 2 way    I could create a dropdown component that is used like this    lt dropdown gt       lt li  click   action  item 1    gt Item 1 lt  li gt       lt li  click   action  item 2    gt Item 2 lt  li gt   lt  dropdown gt    This seems nice  but then the action method needs to be defined on the component that contains the  lt dropdown gt  and the  lt li gt  elements don t get styles applied from the styles in the  lt dropdown gt  component  which is kind of odd   Another option is to create components that are used like this    lt dropdown gt       lt dropdown-item  click   action  item 1    gt Item 1 lt  dropdown-item gt       lt dropdown-item  click   action  item 2    gt Item 2 lt  dropdown-item gt   lt dropdown gt    This is more verbose  the dropdown-item component handles the click action  and the styles of the items get defined by the dropdown-item component as well   Is there a more canonical way to do this in Angular 2   Edit  I m not talking about a custom select input for a form  More like a menu with options  or a right click context menu

User · Answer

This might not exactly you want but I ve used jquery smartmenu https   github com vadikom smartmenus  to build a ng2 dropdown menu        main-menu   smartmenus      http   plnkr co edit wLqLUoBQYgcDwOgSoRfF p preview https   github com Longfld DynamicaLoadMultiLevelDropDownMenu

User · Answer

This is the code to create dropdown in Angular 7  8  9   html file code   lt div gt   lt label gt Summary   lt  label gt   lt select  change   SelectItem  event target value   class  select  gt     lt option value  0  gt --All-- lt  option gt     lt option  ngFor  let item of items  value    item Id Value    gt        item Name      lt  option gt   lt  select gt   lt  div gt     ts file code  SelectItem filterVal  any        var id filterVal        code     items is an array which should be initialized in  ts file

User · Answer

If you want to use bootstrap dropdowns  I will recommend this for angular2   ngx-dropdown

User · Answer

I would say that it depends on what you want to do   If your dropdown is a component for a form that manages a state  I would leverage the two-way binding of Angular2  For this  I would use two attributes  an input one to get the associated object and an output one to notify when the state changes   Here is a sample   export class DropdownValue     value string    label string     constructor value string label string        this value   value      this label   label          Component     selector   dropdown     template         lt ul gt         lt li  ngFor  let value of values   click   select value value   gt   value label   lt  li gt       lt  ul gt         export class DropdownComponent      Input     values  DropdownValue        Input     value  string        Output     valueChange  EventEmitter     constructor private elementRef ElementRef        this valueChange   new EventEmitter           select value        this valueChange emit value           This allows you to use it this way    lt dropdown  values   dropdownValues    value    value  gt  lt  dropdown gt    You can build your dropdown within the component  apply styles and manage selections internally   Edit  You can notice that you can either simply leverage a custom event in your component to trigger the selection of a dropdown  So the component would now be something like this   export class DropdownValue     value string    label string     constructor value string label string        this value   value      this label   label          Component     selector   dropdown     template         lt ul gt         lt li  ngFor  let value of values   click   selectItem value value   gt   value label   lt  li gt       lt  ul gt         export class DropdownComponent      Input     values  DropdownValue        Output     select  EventEmitter     constructor         this select   new EventEmitter           selectItem value        this select emit value           Then you can use the component like this    lt dropdown  values   dropdownValues   select   action  event value   gt  lt  dropdown gt    Notice that the action method is the one of the parent component  not the dropdown one

User · Answer

Hope this will help to someone  Works fine in Angular 6 with reactive forms  Can operate by keyboard too   dropdown component html   lt div class  dropdown-wrapper   className     isFocused    focus         ngClass     is-open  isOpen   disabled  isReadOnly    ngIf  options   contextmenu    event stopPropagation     gt     lt div class  box   click   toggle  event   gt       lt ng-container gt         lt div class  dropdown-selected   ngIf  isSelectedValue  l10nTranslate gt  lt span gt   options selected    lt  span gt  lt  div gt         lt div class  dropdown-selected   ngIf   isSelectedValue  l10nTranslate gt  lt span gt   placeholder   lt  span gt  lt  div gt       lt  ng-container gt     lt  div gt      lt ul class  dropdown-options   ngIf  options  gt       lt li  ngIf  placeholder   click    event stopPropagation    gt   placeholder   lt  li gt       lt ng-container gt         lt li id  li  i             ngFor  let option of options  let i   index           class active   selected     i           click   optionSelect option  i   event           l10nTranslate        gt            option          lt  li gt       lt  ng-container gt      lt  ul gt   lt  div gt    dropdown component scss   import           assets scss variables       DROPDOWN STYLES  dropdown-wrapper       display  -webkit-box      display  -ms-flexbox      display  flex      border  1px solid  DDDDDD      border-radius  3px      cursor  pointer      position  relative       amp  focus          border  1px solid  a8a8a8             box           display  -webkit-box          display  -ms-flexbox          display  flex          width  100                  SELECTED      dropdown-selected           height  30px          position  relative          padding  10px 30px 10px 10px          display  -webkit-box          display  -ms-flexbox          display  flex          -webkit-box-align  center              -ms-flex-align  center                  align-items  center          width  100           font-size  12px          color   666666          overflow  hidden          background-color   fff           amp   before               content                  position  absolute              top  50               right  5px              -webkit-transform  translateY -50                        transform  translateY -50                width  22px              height  22px              background  url   assets i dropdown-open-selector svg                background-size  22px 22px                    span               white-space  nowrap              overflow  hidden              text-overflow  ellipsis                           DROPDOWN OPTIONS      dropdown-options           display  none          position  absolute          padding  8px 6px 9px 5px          max-height  261px          overflow-y  auto          z-index  999          li               padding  10px 25px 10px 10px              font-size   regular-font-size              color   content-text-black              position  relative              line-height  10px               amp  last-child                   border-bottom  none                             amp  hover                   background-color   245A88                  border-radius  3px                  color   fff                  border-bottom-color  transparent                             amp  focus                  background-color   245A88                  border-radius  3px                  color   fff                             amp  active                   background-color   245A88                  border-radius  3px                  color   fff                  border-bottom-color  transparent                             amp  hover                   background-color   7898B3                            amp  active                   font-weight  600                                     amp  is-open            dropdown-selected                amp   before                   content                      position  absolute                  top  50                   right  5px                  -webkit-transform  translateY -50                            transform  translateY -50                    width  22px                  height  22px                  background  url   assets i dropdown-close-selector svg                    background-size  22px 22px                                   dropdown-options               display  -webkit-box              display  -ms-flexbox              display  flex              -webkit-box-orient  vertical              -webkit-box-direction  normal                  -ms-flex-direction  column                      flex-direction  column              width  100               top  32px              border-radius  3px              background-color   ffffff              border  1px solid  DDDDDD              -webkit-box-shadow  0px 3px 11px 0 rgba 1  2  2  0 14                       box-shadow  0px 3px 11px 0 rgba 1  2  2  0 14                        amp  data-input-fields            box               height  35px                       amp  send-email-table-select           min-width  140px          border  none             amp  persoanal-settings           width  80px           div dropdown-wrapper disabled     pointer-events  none    background-color   F1F1F1    opacity  0 7      dropdown component ts  import   Component  OnInit  Input  Output  EventEmitter  HostListener  forwardRef   from   angular core   import   ControlValueAccessor  NG VALUE ACCESSOR   from   angular forms    const noop        gt        export const CUSTOM INPUT CONTROL VALUE ACCESSOR  any       provide  NG VALUE ACCESSOR    useExisting  forwardRef      gt  DropdownComponent     multi  true      Component     selector   app-dropdown     templateUrl     dropdown component html     styleUrls      dropdown component scss      providers   CUSTOM INPUT CONTROL VALUE ACCESSOR     export class DropdownComponent implements OnInit  ControlValueAccessor       Input   options  Array lt string gt      Input   selected  number     Input   className  string     Input   placeholder  string     Input   isReadOnly   false     Output   optSelect   new EventEmitter      isOpen   false    selectedOption      private onTouchedCallback       gt  void   noop    private onChangeCallback      any    gt  void   noop    isSelectedValue  boolean    key  string    isFocused  boolean             Creates an instance of DropdownComponent        memberof DropdownComponent          ngOnInit            Place default value in dropdown     if  this selected          this placeholder             this isOpen   false                HostListener  focus     focusHandler         this selected   0      this isFocused   true          HostListener  focusout     focusOutHandler         this isFocused   false          HostListener  document keydown      event      keyPressHandle event  KeyboardEvent         if  this isFocused          this key   event code        switch  this key            case  Space             this isOpen   true            break          case  ArrowDown             if  this options length - 1  gt  this selected                this selected   this selected   1                        break          case  ArrowUp             if  this selected  gt  0                this selected   this selected - 1                        break          case  Enter             if  this selected  gt  0                this isSelectedValue   true              this isOpen   false              this onChangeCallback this selected               this optSelect emit this options this selected                          break                                option selection      param  string  selectedOption - text      param  number  idx - current index of item      param  any  event - object        optionSelect selectedOption  string  idx  e  any        e stopPropagation        this selected   idx      this isSelectedValue   true         this placeholder           this isOpen   false      this onChangeCallback this selected       this optSelect emit selectedOption                  toggle the dropdown      param  any  event object        toggle e  any        e stopPropagation           close all previously opened dropdowns  before open     const allElems   document querySelectorAll   dropdown-wrapper        for  let i   0  i  lt  allElems length  i            allElems i  classList remove  is-open              this isOpen    this isOpen      if  this selected  gt   0          document querySelector   li    this selected  scrollIntoView true                        dropdown click on outside         HostListener  document  click      event      onClick         this isOpen   false                  Method implemented from ControlValueAccessor and set default selected value       param     obj       memberof DropdownComponent         writeValue obj  any   void       if  obj  amp  amp  obj                 this isSelectedValue   true        this selected   obj        else         this isSelectedValue   false                  From ControlValueAccessor interface   registerOnChange fn  any        this onChangeCallback   fn            From ControlValueAccessor interface   registerOnTouched fn  any        this onTouchedCallback   fn         setDisabledState  isDisabled  boolean   void             Usage   lt app-dropdown formControlName  type   options   types   placeholder   captureData type   isReadOnly   isReadOnly  gt   lt  app-dropdown gt    Options must bind an array as follows  It can change based on the requirement   types                           id    1                value    Type 1                                     id    2                 value    Type 2                                      id    3                  value    Type 3

User · Answer

If you want something with a dropdown  some list of values  and a user specified value that can be filled into the selected input as well  This custom dropdown in angular also has a filter dropdown list on key value entered  Please check this stackblitzlink -  https   stackblitz com edit angular-l9guzo embed 1 amp file src app custom-textarea component ts

[angular] Create a dropdown component

Examples related to angular