Directives don't work

[ilyakonrad]

Directives seem to be super-useful feature but I can't make them work. Everything seems to be set up properly. Service works but directives don't.

<app-button
  theme="transparent"
  size="small"
  alignTo="right"
  gaEvent="see_more_members_joined"
  gaCategory="membership_dashboard"
  (click)="onSetDetailedView(DetailedViews.MembersJoined)"
>
  {{ 'action.see_more' | translate }}
</app-button>

I even copied this project into my project to be able to debug the plugin. The code in ga-event.directive.ts doesn't seem to run at all.

Now I'm wondering if it makes more sense to just use Angular Fire services since Angular Fire is already used in my project...

Any ideas? Am I missing anything?

[maxandriani]

Hi @ilyakonrad! In short everything is ok on you snippet. Did you tried to trigger events on pure components as well? Like <button> or <a>. If it works on does pure components, can you share the code behind of your <app-button>?

There is also another property called gaBind When you can change the trigger event, or also you can declare a template variable and call the trigger manually. But it will be too bloilerplate.

<app-button gaEvent … #ga=“gaEvent” (click)=“ga.trigger();”>

[ilyakonrad]

@maxandriani Yes, I tried simple <button> and <div> as well as tried adding gaBind="click".

[KacperPilkowski]

I have the same issue. Using GoogleAnalyticsService works fine, but I can't get directives to work :<

[5im0n]

@KacperPilkowski, Are you sure to import de NgxGoogleAnalyticsModule on every module where you use the directive ? You should import the NgxGoogleAnalyticsModule on every lazy loading module.