Edit these docs

Angular Mobile Dropdown

Angular Mobile Dropdown - Bootstrap 4 & Material Design

Dropdowns may be used to create a menu for navigation, or field for select one from few options.

Basic example

Wrapping dropdown

Dropdown is constructed in such a way that its direct parent must always be AbsoluteLayout. This layout should contain only the dropdown activator and the dropdown itself. Without this, the dropdown may not work properly.

Basic usage of dropdown - dropdown with his activator wrapped in AbsoluteLayout

Android

iOS

HTML


        <AbsoluteLayout>
          <Button mdbBtn theme="primary" mdbDropdown [dropdown]="menu" text="MDB Button"></Button>

          <MDBDropdownMenu
            #menu="mdbDropdownMenu">
            <Label
              text="Action"
              class="mdb-dropdown-item"
              MDBWavesEffect
            ></Label>
            <Label
              text="Another action"
              class="mdb-dropdown-item"
              MDBWavesEffect
            ></Label>
            <Label
              text="Something else here"
              class="mdb-dropdown-item"
              MDBWavesEffect
            ></Label>
          </MDBDropdownMenu>
        </AbsoluteLayout>

Dropdown with header

There's possibility to add a special dropdown header, which may describe user, what he should do.

HTML


        <AbsoluteLayout>
          <Button mdbBtn theme="primary" mdbDropdown [dropdown]="menu" text="MDB Button"></Button>

          <MDBDropdownMenu
            #menu="mdbDropdownMenu">
            <Label text="Dropdown header" class="mdb-dropdown-header"></Label>
            <Label
              text="Action"
              class="mdb-dropdown-item"
              MDBWavesEffect
            ></Label>
            <Label
              text="Another action"
              class="mdb-dropdown-item"
              MDBWavesEffect
            ></Label>
            <Label
              text="Something else here"
              class="mdb-dropdown-item"
              MDBWavesEffect
            ></Label>
          </MDBDropdownMenu>
        </AbsoluteLayout>

Dropdown placement

There's possibility to change placement of the dropdown in four ways - top, bottom, left, right

HTML


        <AbsoluteLayout>
          <Button mdbBtn theme="primary" mdbDropdown [dropdown]="menu" text="MDB Button"></Button>

          <MDBDropdownMenu placement="right"
                           #menu="mdbDropdownMenu">
            <Label
              text="Action"
              class="mdb-dropdown-item"
              MDBWavesEffect
            ></Label>
            <Label
              text="Another action"
              class="mdb-dropdown-item"
              MDBWavesEffect
            ></Label>
            <Label
              text="Something else here"
              class="mdb-dropdown-item"
              MDBWavesEffect
            ></Label>
          </MDBDropdownMenu>
        </AbsoluteLayout>

Using events

Dropdown has four events which can be used to determine actual dropdown state

HTML
TS


        <AbsoluteLayout>
          <Button mdbBtn theme="primary" mdbDropdown [dropdown]="menu" text="MDB Button"></Button>

          <MDBDropdownMenu
            (dropdownShow)="onDropdownShow($event)"
            (dropdownShown)="onDropdownShown($event)"
            (dropdownHide)="onDropdownHide($event)"
            (dropdownHidden)="onDropdownHidden($event)"
            #menu="mdbDropdownMenu">
            <Label
              text="Action"
              class="mdb-dropdown-item"
              MDBWavesEffect
            ></Label>
            <Label
              text="Another action"
              class="mdb-dropdown-item"
              MDBWavesEffect
            ></Label>
            <Label
              text="Something else here"
              class="mdb-dropdown-item"
              MDBWavesEffect
            ></Label>
          </MDBDropdownMenu>
        </AbsoluteLayout>


        import {Component} from '@angular/core';

        @Component({
          selector: 'Home',
          moduleId: module.id,
          templateUrl: './home.component.html',
        })
        export class HomeComponent {
          onDropdownShow($event: any) {
            console.log(`show: ${$event}`);
          }

          onDropdownShown($event: any) {
            console.log(`shown: ${$event}`);
          }

          onDropdownHide($event: any) {
            console.log(`hide: ${$event}`);
          }

          onDropdownHidden($event: any) {
            console.log(`hidden: ${$event}`);
          }
        }

Edit these docs

Angular Mobile Dropdown - API

In this section you will find informations about dropdown and its required modules and available inputs, outputs, methods and events.

Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular Mobile library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.


    // MDB Angular Mobile Free
    import { MdbDropdownModule } from 'mdb-angular-mobile'

Import example Modules list

Components

MdbDropdownMenu

Selector: MDBDropdownMenu

Type: MdbDropdownMenuComponent

Directives

MdbDropdown

Selector: mdbDropdown

Type: MdbDropdownDirective

Inputs

MdbDropdownDirective

Name	Type	Default	Description	Example
`dropdown`	MdbDropdownMenuComponent	-	This input is necessary for proper working dropdown. Binds dropdown template to dropdown activator.	`[dropdown]="menu"`

MdbDropdownMenuComponent

Name	Type	Default	Description	Example
`duration`	number	300	Allow to overwrite dropdown animation duration. Time in ms.	`duration="1000"`
`placement`	'left' \| 'right' \| 'top' \| 'bottom'	'bottom'	Allow to set the place, where dropdown will be rendered. If dropdown won't fit in remaining space, it will render opposite of actual placement.	`placement="right"`

Events

MdbDropdownMenuComponent

Name	Type	Description	Example
`dropdownShown`	boolean	This event fires immediately when the dropdown is shown.	`(dropdownShown)="dropdownShown($event)"`
`dropdownShow`	boolean	This event fires immediately when the show method is called.	`(dropdownShow)="dropdownShow($event)"`
`dropdownHide`	boolean	This event fires immediately when hide method is called.	`(dropdownHide)="dropdownHide($event)"`
`dropdownHidden`	boolean	This event fires immediately when the dropdown is hidden.	`(dropdownHidden)="dropdownHidden($event)"`

Service	Why?	Agreement
Essential cookies	These cookies are strictly necessary to provide you with services available through our websites and to use some of its features, such as access to secure areas. Because these cookies are strictly necessary to deliver the websites, you cannot refuse them without impacting how our websites function. You can block or delete them by changing your browser settings.	No Yes
Functional	These cookies are used to enhance the performance and functionality of our websites but are non-essential to their use. However, without these cookies, certain functionality may become unavailable. These cookies are served by brandflow.net.	No Yes
Google AdWords	These cookies are used to make advertising via Google AdWords messages more relevant to you and your interests. They also perform functions like preventing the same ad from continuously reappearing, ensuring that ads are properly displayed, and in some cases selecting advertisements that are based on your interests.	No Yes
Facebook Pixel	These cookies are used to make advertising Facebook messages more relevant to you and your interests. They also perform functions like preventing the same ad from continuously reappearing, ensuring that ads are properly displayed, and in some cases selecting advertisements that are based on your interests.	No Yes