RadSideDrawer Callbacks

This article explains how to use the events provided by the RadSideDrawer with Angular in order to receive information of the drawer's state.

Subscribing to events with Angular

The RadSideDrawer allows you to receive events and execute code when sideDrawer's state is changed. There are four events that the drawer fires:

• drawerOpening
• drawerOpened
• drawerClosing
• drawerClosed

In order to receive these events you need to subscribe for them in the XML where you define the RadSideDrawer

<RadSideDrawer (drawerOpening)="onDrawerOpening($event)" (drawerOpened)="onDrawerOpened($event)" (drawerClosing)="onDrawerClosing($event)"
    (drawerClosed)="onDrawerClosed($event)" (drawerPan)="onDrawerPan($event)" [transition]="sideDrawerTransition"
    tkExampleTitle tkToggleNavButton>

Then you need to provide the actual methods that will be executed when the events are fired.

@Component({
    moduleId: module.id,
    selector: "tk-sidedrawer-events",
    templateUrl: 'events.component.html',
    styleUrls: ['events.component.css']
})
@Injectable()
export class SideDrawerEventsComponent implements AfterViewInit, OnInit {
    private _currentNotification: string;
    private _sideDrawerTransition: DrawerTransitionBase;

    constructor(private _changeDetectionRef: ChangeDetectorRef) {
    }

    @ViewChild(RadSideDrawerComponent, { static: false }) public drawerComponent: RadSideDrawerComponent;
    private drawer: RadSideDrawer;

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

    ngOnInit() {
    }

    public get sideDrawerTransition(): DrawerTransitionBase {
        return this._sideDrawerTransition;
    }

    public get currentNotification(): string {
        return this._currentNotification;
    }

    public openDrawer() {
        this.drawer.showDrawer();
    }

    public onCloseDrawerTap() {
        this.drawer.closeDrawer();
    }

    public onDrawerOpening(args: DrawerStateChangingEventArgs) {
        this._currentNotification = "Drawer opening";
    }

    public onDrawerOpened(args: DrawerStateChangedEventArgs) {
        this._currentNotification = "Drawer opened";
    }

    public onDrawerClosing(args: DrawerStateChangingEventArgs) {
        this._currentNotification = "Drawer closing";
    }

    public onDrawerClosed(args: DrawerStateChangedEventArgs) {
        this._currentNotification = "Drawer closed";
    }

    public onDrawerPan(args: DrawerStateChangedEventArgs) {
        this._currentNotification = "Drawer pan";
    }
}