Warning: Use of undefined constant MDB_STRIPE_SUB_WEBHOOK_SECRET - assumed 'MDB_STRIPE_SUB_WEBHOOK_SECRET' (this will throw an Error in a future version of PHP) in /var/www/acc01/wp-content/themes/mdbootstrap4/inc/mdb-subscriptions/mdb-payments/stripe/class-mdb-stripe-webhook.php on line 26

Notice: Undefined index: HTTP_REFERER in /var/www/acc01/wp-content/themes/mdbootstrap4/inc/cookie-setter.php on line 8
Angular Mobile Switch - Bootstrap 4 & Material Design. - Material Design for Bootstrap

Angular Mobile Switch

Angular Mobile switch / toggle - Bootstrap 4 & Material Design

Angular Mobile Bootstrap switch/toggle is a simple component used for activating one of two predefined options. It is commonly used as an on/off button.

The switch/toggle mostly used in a number of various forms since they are dead simple to use and cut the time one needs to fill all the inputs.

Examples of Angular Mobile Bootstrap switch use:

  • Forms
  • On/Off Functionality
  • Preference choice

Basic example

Android
Android switch
iOS
iOS switch

          <WrapLayout>
            <Label text="Off"></Label>
            <Switch mdbSwitch theme="primary"></Switch>
            <Label text="On"></Label>
          </WrapLayout>
        

Checked state

Set checked input to true or false to change default checked state.

Android
Android switch
iOS
iOS switch

        <WrapLayout>
          <Label text="Off"></Label>
          <Switch mdbSwitch theme="primary" checked="true"></Switch>
          <Label text="On"></Label>
        </WrapLayout>
      

Disabled switch

Set isEnabled input to false to disable switch.

Android
Android switch
iOS
iOS switch

        <WrapLayout>
          <Label text="Off"></Label>
          <Switch mdbSwitch theme="primary" isEnabled="false"></Switch>
          <Label text="On"></Label>
        </WrapLayout>
      

Colorful switch

Use theme input to customize switch colors.

Android
Android switch
iOS
iOS switch

        <StackLayout>
            <WrapLayout>
              <Label text="Off"></Label>
              <Switch mdbSwitch theme="primary"></Switch>
              <Label text="On"></Label>
            </WrapLayout>
          
            <WrapLayout>
              <Label text="Off"></Label>
              <Switch mdbSwitch theme="secondary"></Switch>
              <Label text="On"></Label>
            </WrapLayout>
          
            <WrapLayout>
              <Label text="Off"></Label>
              <Switch mdbSwitch theme="elegant"></Switch>
              <Label text="On"></Label>
            </WrapLayout>
          </StackLayout>
      

Angular Mobile Switch - API

In this section you will find informations about required modules of mobile switch component.


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 library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.


    // MDB Angular Pro
    import { MdbSwitchModule } from 'mdb-angular-mobile'
    

Directives

MdbSwitch

Selector: [mdbSwitch]

Type: MdbSwitchDirective


Inputs

MdbSwitchDirective
Name Type Default Description Example
checked boolean false Allow to set checked state of swtich. checked="true"
isEnabled boolean true Allow to disable switch. isEnabled="false"
theme string - Allow to use predefined switch themes. theme="primary"