RadSideDrawer: Callbacks

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

Subscribing to events with Angular 2.0

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
  • drawerClosed
  • 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()" (drawerOpened)="onDrawerOpened()" (drawerClosing)="onDrawerClosing()"
    (drawerClosed)="onDrawerClosed()" [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 OnInit {
    private _currentNotification: string;
    private _sideDrawerTransition: sideDrawerModule.DrawerTransitionBase;

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

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

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

    ngOnInit() {
    }

    public onLoaded(args) {
        this._sideDrawerTransition = new sideDrawerModule.PushTransition();
    }

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

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

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

    public onDrawerOpening() {
        console.log("Drawer opening");
        this._currentNotification = "Drawer opening";
    }

    public onDrawerOpened() {
        console.log("Drawer opened");
        this._currentNotification = "Drawer opened";
    }

    public onDrawerClosing() {
        console.log("Drawer closing");
        this._currentNotification = "Drawer closing";
    }

    public onDrawerClosed() {
        console.log("Drawer closed");
        this._currentNotification = "Drawer closed";
    }
}