Is this plugin working on Ionic 3 project?

[LHLK]

Hello there, I installed this plugin on my Ionic 3 project but it didn't work out.

Please advice. Thanks. LH

[Drunkenpilot]

Here is a good example for ionic 2+ https://stackoverflow.com/questions/44023321/how-to-add-ionic2-native-button-click-sound

[LHLK]

Hello MatiMenich, Need more advice. I created a new ionic 3 app with tabs option and followed the link above and modified the app.component.ts as follow:  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {    platform.ready().then((val) => {      // Okay, so the platform is ready and our plugins are available.      // Here you can do any higher level native things you might need.        if (val === 'cordova'){          var clickyClasses = ['button', 'a','tabSwitch']; // add other classes that should make a sound when clicked on          nativeclick.watch(clickyClasses);        }        statusBar.styleDefault();      splashScreen.hide();    });  } The tabSwitch classes didn't make any sound when I tapped any of those default three tabs: Home, About, Contacts.  Note: According to the instruction there wasn't any npm install, for instance: npm install --save @ionic-native/in-app-browser.  I don't know how to add this nativeClickSound inside the app.module.ts provider array.   Maybe there is other way to make it works.  Please advice with thanks. LHLK

Drunkenpilot <[email protected]> 於 2018年02月17日 (週六) 9:12 AM 寫道﹕

Here is a good example for ionic 2+ https://stackoverflow.com/questions/44023321/how-to-add-ionic2-native-button-click-sound— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[Lx]

I can confirm that this plug-in works on an Ionic 3 project.

Be aware that the watch method expects an array of classes. Ionic 3 does not appear to apply a specific class to all Ionic buttons. Therefore, you need to assign your own custom class to the elements that you wish to click when tapped.

I've done similar to this:

nativeclick.watch(['clicky']);

<button ion-button menuToggle class="clicky"> ... </button>

with good results.

[Lx]

I found assigning the clicky class to every necessary component to be excessively tedious, so I now run the following code in my app's root component constructor to target elements by tag name:

constructor(
  platform: Platform,
  statusBar: StatusBar,
  splashScreen: SplashScreen,
) {
  platform.ready().then(() => {
    // ↓↓↓ BEGIN ADDITION
    const nativeClickListener = (event: Event) => {
      // Traverse through the clicked element and all ancestors.
      for (
        let curElement = <Element> event.target;
        curElement != null;
        curElement = curElement.parentElement
      ) {
        // If a BUTTON element is encountered, trigger a click and stop.
        if (curElement.tagName === 'BUTTON') {
          // ‘nativeclick’ doesn't exist outside Cordova's environment.
          typeof nativeclick !== 'undefined' && nativeclick.trigger();
          break;
        }
      }
    };
    // Call the above listener whenever anything is clicked, ensuring that it
    // is called before more specific EventTargets (or else clicks won't be
    // heard on e.g. <ion-datetime> components).
    document.addEventListener('click', nativeClickListener, true);
    // ↑↑↑ END ADDITION
    statusBar.styleDefault();
    splashScreen.hide();
  });
}

It might be appropriate to watch for more tag names. Adjust as necessary.

[Lx]

See this answer on Stack Overflow for more details.

[LHLK]

Hi Lx, It works. Thanks very much !

[ansarikhurshid786]

Not working. I tried all solutions above.

[Lx]

It is working for others. Maybe post your code on Stack Overflow and someone can help you there.