<ngx-auth-firebaseui-avatar> links are not firing callback

[kevin192291]

Bug Report or Feature Request (mark with an x)

- [x ] bug report -> please search issues before submitting
- [ ] feature request

OS and Version?

Windows 10, Linux Mint

Versions

 _                      _                 ____ _     ___
/ \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|

/ △ \ | '_ \ / | | | | |/ _ | '__| | | | | | |
/ ___ | | | | (| | || | | (| | | | || | | |
// __| ||_, |_,||_,|| _|||
|___/

Angular CLI: 8.1.1
Node: 10.15.2
OS: win32 x64
Angular: 8.1.1
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

Package Version

@angular-devkit/architect 0.801.1
@angular-devkit/build-angular 0.801.1
@angular-devkit/build-optimizer 0.801.1
@angular-devkit/build-webpack 0.801.1
@angular-devkit/core 8.1.1
@angular-devkit/schematics 8.1.1
@angular/cdk 8.0.2
@angular/fire 5.2.1
@angular/flex-layout 8.0.0-beta.26
@angular/material 8.0.2
@angular/pwa 0.801.1
@ngtools/webpack 8.1.1
@schematics/angular 8.1.1
@schematics/update 0.801.1
rxjs 6.4.0
typescript 3.4.5
webpack 4.35.2

Repro steps

After installing ngx-auth-firebaseui correctly,
Typescript of:

links: LinkMenuItem[] = [ { text: 'Privacy Policy', icon: null, callback: this.callback1, }, { text: 'Terms of Service', icon: null, callback: () => { debugger; this.router.navigate(['/test']); } } ]; public callback1() { debugger; }

HTML of:
<ngx-auth-firebaseui-avatar [links]="links"></ngx-auth-firebaseui-avatar>

The log given by the failure

Desired functionality

The links are displayed within the menu that opens when clicking the avatar icon, however the links
appear to do nothing, and not fire the callback.
I would think at least on of the functions should have been hit.
Am I doing something wrong?

Mention any other details that might be useful

I can't get the icon field to work as well 😔

[AnthonyNahas]

I've just pushed a new update v.3.2.6

here is an example regarding the avatar component

import {LinkMenuItem} from 'ngx-auth-firebaseui';

links: LinkMenuItem[];

 ngOnInit(): void {
    this.links = [
      {icon: 'home', text: 'Home', callback: this.printLog},
      {icon: 'favorite', text: 'Favorite', callback: this.printLog},
      {icon: 'add', text: 'Add', callback: this.printLog},
    ];
  }

 printLog() {
    console.log('this is a log :D');
  }

<ngx-auth-firebaseui-avatar [links]="links"></ngx-auth-firebaseui-avatar>

the appropriate demo app can be found here: https://ngx-auth-firebaseui.firebaseapp.com/examples/avatar

[kevin192291]

Just updated to v.3.2.6, both the icon and callbacks are working as expected.
Thank you @AnthonyNahas This update is much appreciated and very useful!

[flyingcodelabs]

How can I use the Router in the callback?
When using a function with the router , the router although injected in the constructor is undefined.
Cannot read property 'navigate' of undefined

for example:
printLog()
{
this.router.navigate(['/mycollection/']);
}

how can I make this work?

[zhangquan0126]

I have the same issue when using the navigateByUrl in the callback:

core.js:5967 ERROR TypeError: Cannot read property 'navigateByUrl' of undefined
    at Object.getAnswers [as callback] (app.component.ts:24)
    at NgxAuthFirebaseuiAvatarComponent_div_11_Template_button_click_1_listener (ngx-auth-firebaseui.js:844)
    at executeListenerWithErrorHandling (core.js:14981)
    at wrapListenerIn_markDirtyAndPreventDefault (core.js:15022)
    at HTMLButtonElement.<anonymous> (platform-browser.js:582)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:28269)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:480)

[zhangquan0126]

After some researches on the code, it shows that the reason for the navigation error is that "this" is not bound. To fix, just use the below syntax for the callback:

callback: () => { this.router.navigateByUrl("mycollection");