value of token are null between functions

Question

i am using ionic 2 with cordova-plugin-fcm plugin from https://github.com/fechanique/cordova-plugin-fcm

i am facing issue assigning value of token to the deviceId, the console.log displays the value correctly within the call but returns null outside

the code is as follows :

declare var FCMPlugin;

@Component({
  templateUrl: `app.template.html`
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
  public deviceId: any;


  appPages: PageObj[] = [
    { title: 'Home', component: HomePage, icon: 'home' },
    { title: 'Profile', component: UserProfilePage, icon: 'calendar' },
    { title: 'Give Feedback', component: FeedbackPage, icon: 'calendar' },
  ];

  rootPage: any;
  TutorialPage: TutorialPage;

  constructor(platform: Platform,
    public menu: MenuController,
    private actionSheetCtrl: ActionSheetController,
    public authService: AuthService,
    public dataService: DataService) {

    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();

      FCMPlugin.getToken(
        function (token) {
          console.log('device token is ' + token);
           var deviceId = token;
          console.log('value of id is' + deviceId);
        },
        function (err) {
          console.log('error retrieving token: ' + err);
        }
      );
    });
  }

  ngOnInit() {
    var self = this;
    this.authService.onAuthStateChanged(function (user) {
      if (user === null) {
        self.nav.setRoot(TutorialPage);
      }
    });
  }

  ngAfterViewInit() {
        var self = this;
    this.authService.onAuthStateChanged(function (user) {
      if (user === null) {
        self.menu.close();
        self.nav.setRoot(TutorialPage);
      } else {
        console.log("device token upon login is" + this.deviceId);
        let uid = self.authService.getLoggedInUser().uid;
        console.log("uid at login is " + uid);
        self.dataService.setDeviceToken(uid, this.deviceId);
      }
    });

  }

values of deviceId are displayed null in the ngAfterViewInit

finally working : ----

edited code that works is :

declare var FCMPlugin;

@Component({
  templateUrl: `app.template.html`
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
  public deviceId: any;


  appPages: PageObj[] = [
    { title: 'Home', component: HomePage, icon: 'home' },
    { title: 'Profile', component: UserProfilePage, icon: 'calendar' },
    { title: 'Give Feedback', component: FeedbackPage, icon: 'calendar' },
  ];

  rootPage: any;
  TutorialPage: TutorialPage;

  constructor(platform: Platform,
    public menu: MenuController,
    private actionSheetCtrl: ActionSheetController,
    public authService: AuthService,
    public dataService: DataService) {

    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();

      FCMPlugin.getToken(
        token => {
          var self = this;
          console.log('device token is ' + token);
          let devicetoken = token;
          console.log('value of id is' + devicetoken);
          self.deviceId = devicetoken;

        },
        function (err) {
          console.log('error retrieving token: ' + err);
        }
      );
    });
  }

  ngOnInit() {
    var self = this;
    this.authService.onAuthStateChanged(function (user) {
      if (user === null) {
        self.nav.setRoot(TutorialPage);
      }
    });
  }

  ngAfterViewInit() {
    var self = this;
    this.authService.onAuthStateChanged(function (user) {
      if (user === null) {
        self.menu.close();
        self.nav.setRoot(TutorialPage);
      } else {
        console.log("device token upon login is" + self.deviceId);
        let uid = self.authService.getLoggedInUser().uid;
        console.log("uid at login is " + uid);
        self.dataService.setDeviceToken(uid, self.deviceId);
      }
    });

  }

Answer 1

The first use of 'deviceId' variable is a local variable declared in the function.

The second use of 'deviceId' is a field in the MyApp instance (object) and is never assigned.

Change to:

FCMPlugin.getToken(
    token => {
      console.log('device token is ' + token);
       var deviceId = token;
      console.log('value of id is' + deviceId);
       this.deviceId = token;
    },
    function (err) {
      console.log('error retrieving token: ' + err);
    }
  );

Also make sure you retrieve the deviceId from the instance, so in callback function onAuthStateChanged, use self.deviceId instead of this.deviceId