Warning: session_start(): open(/var/lib/php/fpm/session/sess_ftnc5sk80faf5ornh6sgnme366, O_RDWR) failed: No such file or directory (2) in /var/www/acc01/wp-content/plugins/wordpress-social-login/wp-social-login.php on line 64

Warning: session_start(): Failed to read session data: files (path: /var/lib/php/fpm/session) in /var/www/acc01/wp-content/plugins/wordpress-social-login/wp-social-login.php on line 64

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

Angular Mobile Collapse

Angular Mobile Collapse - Bootstrap 4 & Material Design

Collapse allows you to create sliders that show or hide content.


Basic example

Every collapse element should have his own private wrapper - e.g StackLayout

Android
Android collapse
iOS
iOS collapse

        <StackLayout>
          <Button (tap)="first.toggle(firstCollapseToggle = !firstCollapseToggle)" text="Toggle collapse"></Button>
          <Label text="First collapse" mdbCollapse #first="mdbCollapse" class="p-5"></Label>
        </StackLayout>
      

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

        @Component({
          selector: 'App',
          moduleId: module.id,
          templateUrl: './app.component.html',
        })
        export class AppComponent {
          firstCollapseToggle = false;
        }

      

Show & Hide manually

Collapse has public show() and hide() methods with which you're able to show or hide collapse manually.


        <StackLayout>
          <StackLayout>
            <Button (tap)="first.toggle(firstCollapseToggle = !firstCollapseToggle)" text="Toggle collapse"></Button>
            <Label class="p-5" text="First collapse" mdbCollapse #first="mdbCollapse"></Label>
          </StackLayout>

          <Button mdbBtn theme="primary" (tap)="show()" text="Show collapse"></Button>
          <Button mdbBtn theme="danger" (tap)="hide()" text="Hide collapse"></Button>
        </StackLayout>
      

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

        @Component({
          selector: 'App',
          moduleId: module.id,
          templateUrl: './app.component.html',
        })
        export class AppComponent {
          @ViewChild('first', {static: true}) firstCollapse: MdbCollapseDirective;
          firstCollapseToggle = false;

          show() {
            this.firstCollapse.show();
          }

          hide() {
            this.firstCollapse.hide();
          }
        }

      

Using events

Collapse has four public events, which can be used to determine actual collapse state


        <StackLayout>
          <StackLayout>
            <Button (tap)="first.toggle(firstCollapseToggle = !firstCollapseToggle)" text="Toggle collapse"></Button>
            <Label text="First collapse" mdbCollapse #first="mdbCollapse" class="p-5"
                   (collapseShow)="onShow($event)"
                   (collapseShown)="onShown($event)"
                   (collapseHide)="onHide($event)"
                   (collapseHidden)="onHidden($event)"></Label>
          </StackLayout>
        </StackLayout>
      

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

        @Component({
          selector: 'App',
          moduleId: module.id,
          templateUrl: './app.component.html',
        })
        export class AppComponent {
          firstCollapseToggle = false;

          onShow(value: boolean) {
            console.log(`show: ${value}`);
          }

          onShown(value: boolean) {
            console.log(`shown: ${value}`);
          }

          onHide(value: boolean) {
            console.log(`hide: ${value}`);
          }

          onHidden(value: boolean) {
            console.log(`hidden: ${value}`);
          }
        }
      

Angular Mobile Collapse - API

In this section you will find informations about collapse 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 { MdbCollapseModule } from 'mdb-angular-mobile'

Directives

MdbCollapse

Selector: mdbCollapse

Type: MdbCollapseDirective


Inputs

MdbCollapseDirective
Name Type Default Description Example
duration number 300 Allow to modify the collapse animation duration. Takes time in ms. duration="1000"

Events

MdbCollapseDirective
Name Type Description Example
collapseShown boolean This event fires immediately when the collapse is shown. (collapseShown)="collapseShown($event)"
collapseShow boolean This event fires immediately when the show method is called. (collapseShow)="collapseShow($event)"
collapseHide boolean This event fires immediately when hide method is called. (collapseHide)="collapseHide($event)"
collapseHidden boolean This event fires immediately when the collapse is hidden. (collapseHidden)="collapseHidden($event)"

Methods

MdbCollapseDirective
Name Description
toggle(value: boolean) Toggle the collapse based on the passed parameter.
show() Shows the collapse.
hide() Hides the collapse.