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) {

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

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

    ngAfterViewInit() {
        this.drawer = this.drawerComponent.sideDrawer;

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

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