🎟️ Grab your ticket for NativeScript Developer Day! Coming in April to Amsterdam. Learn more here.

NativeScript Angular

RadSideDrawer Location

RadSideDrawer can be can be located at each side of the screen (top, bottom, right, left). Setting the location can be done by setting the drawerLocation property to one of the following value:

  • Top
  • Bottom
  • Left
  • Right
<RadSideDrawer [drawerLocation]="currentLocation" tkExampleTitle tkToggleNavButton>
export class SideDrawerPositionComponent implements AfterViewInit, OnInit {
    private _currentLocation: SideDrawerLocation;

    constructor(private page: Page, private _dataService: DataService, private _changeDetectionRef: ChangeDetectorRef) {
        this.page.on("loaded", this.onLoaded, this);
    }

    public onLoaded() {
        if (this.drawer.android) {
            this.drawer.android.setDrawerCloseThreshold(20);
        }
    }

    ngOnInit() {
        this.currentLocation = SideDrawerLocation.Left;
    }

    @ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
    private drawer: RadSideDrawer;

    ngAfterViewInit() {
        this.drawer = this.drawerComponent.sideDrawer;
        this._changeDetectionRef.detectChanges();
    }

    get currentLocation(): SideDrawerLocation {
        return this._currentLocation;
    }

    set currentLocation(value: SideDrawerLocation) {
        this._currentLocation = value;
    }
}