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.
@Component({
selector: 'my-example',
template: `<input [(ngModel)]="birthday" mbsc-calendar [mbsc-options]="settings" />`
})
export class MyExampleComponent {
birthday: Date = new Date();
settings: MbscCalendarOptions = {
onSet: (event, inst) => {
const selectedDate = inst.getVal(); // Call the getVal method
}
};
}
@Component({
selector: 'my-inline-example',
template: `<mbsc-calendar [(ngModel)]="birthday" (onSet)="mySend($event)" />`
})
export class MyExampleComponent {
birthday: Date = new Date();
mySend(event: any) {
const selectedDate = event.inst.getVal(); // Call the getVal method
}
}
2. Using the instance property of the exported class
The mobiscroll directives and components are exported as 'mobiscroll' for template variables. Every exported object has an 'instance' property.
<mbsc-popup #myPopup="mobiscroll">
<p>Here is the popup content</p>
</mbsc-popup>
<mbsc-button (click)="myPopup.instance.show()">Show My Popup</mbsc-button>
3. Through active instance
Stores the currently active mobiscroll instance (expcept inline instances), or null if there is no active instance.
mobiscroll.activeInstance
Setting options dynamically
There are two ways to modify options after initalization
-
Using the option method.
The option method always triggers reinitialization. Most of the settings can be updated only this way, updating without initialization has no effect, because the markup is already generated. If the scroller was visible, the reinitialization hides it and it's not shown again automatically (except in inline display mode).
Here is an example for the dynamic option changeimport { ViewChild } from '@angular/core'; @Component({ selector: 'my-example', template: ` <input mbsc-scroller #myVariable="mobiscroll" [(ngModel)]="myExample"/> <button (click)="changeOptions()">Change theme and language</button> ` }) export class MyExample { @ViewChild('myVariable') myRef: any; // Modify options changeOptions() { this.myRef.instance.option({ theme: 'mobiscroll', lang: 'de' }); } }
-
Modify directly the
settings
object.
Useful when changing dynamic settings, which do not need redraw (e.g. readonly, calendar marked days).
Exampleimport { ViewChild } from '@angular/core'; @Component({ selector: 'my-example', template: ` <input mbsc-scroller #myVariable="mobiscroll" [mbsc-options]="myOptions"/> <button (click)="changeOptions()">Change readonly</button> ` }) export class MyExample { @ViewChild('myVariable') myRef: any; // get instance and modify a setting changeOptions() { this.myRef.instance.settings.readonly = true; } // Modify settings in an event myOptions: any = { onBeforeShow: (event, inst) => { inst.settings.readonly = true; } } }