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.

<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
    };
}

2. By referencing the component from the template

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

<mbsc-datepicker #myDatepicker label="Datepicker component"></mbsc-datepicker>
<mbsc-button (click)="myDatepicker.open()">Show The Datepicker</mbsc-button>

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

<mbsc-datepicker #myDatepicker label="Datepicker component"></mbsc-datepicker>
<mbsc-button (click)="myOpen()">Show The Datepicker</mbsc-button>

@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';
}