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
<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. |