nativescript-angular: RadSideDrawer Showing an error like Cannot Read property 'sideDrawer' of undefined.

app.component.ts

`import { FireBaseService } from "./services";
import { Component, Injectable, ViewChild, ChangeDetectorRef } from "@angular/core";
import { RadSideDrawerComponent, SideDrawerType } from "nativescript-telerik-ui/sidedrawer/angular";

@Injectable()
@Component({
  selector: "main",
  template: "<page-router-outlet></page-router-outlet>",
})
export class AppComponent {
  @ViewChild(RadSideDrawerComponent)
  public drawerComponent: RadSideDrawerComponent;
  public drawer: SideDrawerType;
  public pages: Array<Object>
  constructor(private firebaseService: FireBaseService,
    private _changeDetectionRef: ChangeDetectorRef) {
    this.pages = [
      { name: "Home" },
      { name: "About" },
      { name: "Contact" }
    ];
  }
  ngOnInit() {
    this.firebaseService.initFirebase().then(
      (instance) => {
        this.firebaseService.subscribeNotifications();
        console.log("firebase.init done");
      },
      (error) => {
        console.log("firebase.init error: " + error);
      }
    );
    console.log("Drawer COmoponent is", JSON.stringify(this.drawerComponent));
  }
  ngAfterViewInit() {
    this.drawer = this.drawerComponent.sideDrawer;
    this._changeDetectionRef.detectChanges();
  }

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

`

app.component.html

`import { Component, Injectable, ViewChild, ChangeDetectorRef } from "@angular/core";
import { RadSideDrawerComponent, SideDrawerType } from "nativescript-telerik-ui/sidedrawer/angular";

@Injectable()
@Component({
  selector: "main",
  template: "<page-router-outlet></page-router-outlet>",
})
export class AppComponent {
  @ViewChild(RadSideDrawerComponent)
  public drawerComponent: RadSideDrawerComponent;
  public drawer: SideDrawerType;
  public pages: Array<Object>
  constructor(private firebaseService: FireBaseService,
    private _changeDetectionRef: ChangeDetectorRef) {
    this.pages = [
      { name: "Home" },
      { name: "About" },
      { name: "Contact" }
    ];
  }
 
  ngAfterViewInit() {
    this.drawer = this.drawerComponent.sideDrawer;
    this._changeDetectionRef.detectChanges();
  }

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