Mobiscroll Instance

When a mobiscroll component is initialized, an instance of the component is created. Through the instance you have access to all methods and properties of the component.

There are multiple ways to access the instance of an individual component.

1. Inside events

The mobiscroll instance is passed as parameter for every event of the component.

Sample usage
<mbsc-datepicker [options]="myOptions"></mbsc-datepicker>
@Component({
selector: 'my-component',
templateUrl: 'my-component.template.html',
})
export class MyComponent {
    myOptions: MbscDatepickerOptions = {
        onClose: (ev, inst) => {
            const selectedDate = inst.getVal(); // calling the getVal method
        },
    };
}

In case of Event Emitters, only one argument can be passed to the subscribed event handler. So in these cases, the instance of the component or directive is under the inst property of the event.

<mbsc-datepicker (onClose)="myCloseHandler($event)"></mbsc-datepicker>
@Component({
selector: 'my-component',
templateUrl: 'my-component.template.html',
})
export class MyComponent {
    myCloseHandler: (ev: any) => {
        const datepickerInstance = ev.inst;
        const selectedDate = datepickerInstance.getVal(); // calling the getVal method
    };
}
Please note that the getVal methods is used here only for presentation purposes. If you want to get the selected value of the datepicker the recommended way is to bind the datepicker to a model, using the [(ngModel)] directive.

2. By referencing the component from the template

The mobiscroll directives and components are exported as 'mobiscroll' for template variables.

HTML Template
<mbsc-datepicker #myDatepicker label="Datepicker component"></mbsc-datepicker>
<mbsc-button (click)="myDatepicker.open()">Show The Datepicker</mbsc-button>
Directives on other Components
<ion-input mbsc-datepicker #myDatepicker="mobiscroll" label="Datepicker directive"></ion-input>
<mbsc-button (click)="myDatepicker.open()">Show The Datepicker</mbsc-button>

Template variables (like the #myDatepicker above) can also be used to reference the instance in the typescript classes using the @ViewChild decorator:

HTML Template
<mbsc-datepicker #myDatepicker label="Datepicker component"></mbsc-datepicker>
<mbsc-button (click)="myOpen()">Show The Datepicker</mbsc-button>
Typescript Class
@Component({
selector: 'my-component',
templateUrl: 'my-component.template.html',
})
export class MyComponent {
    @ViewChild('myDatepicker', { static: false })
    instance: MbscDatepicker;

    myOpen() {
        this.instance.open(); // NOTE: this.instance is only available after the ngAfterViewInit lifecycle event
    }
}

Setting options dynamically

To bind an option to a component's property, place the option name in square brackets ([]). Whenever the component property is changed, the option is dynamically updated with the new property value.

<mbsc-scroller [theme]="myTheme"></mbsc-scroller>
myTheme = 'ios';

changeTheme() {
  // Changes the theme to Material
  this.myTheme = 'material';
}
For performance reasons Angular's change detection compares values by reference. This means, that in case of options, which accept complex data structures, like arrays or objects, changes made inside the array or object won't be detected. To ensure the change is detected, always pass a new array or object reference.