How to use one native function on multiple pages

Ionic Native
#1

Hi, I’m trying to use native features such as ‘social share’ and ‘call number https://ionicframework.com/docs/native/call-number’ on multiple pages. I can successfully put the code of a pages’s TS file then I can only use it on that particular page.

How do I add this native code in a general ts file and still call it on multiple pages? I’ve searched for tutorials and guides on this but I don’t seem to get the proper way this can be done.

I also asked this question on reddit sometime ago:https://www.reddit.com/r/ionic/comments/ecelza/how_to_use_one_native_function_on_multiple_pages/

I was told to create a custom service file but I don’t seem to know how to do this right. In which directory do I put this service file and how do I call it on other pages? I created a service directory in the app directory and created a custom service.ts file. here is what it looks like:

import { Injectable } from '@angular/core';
import { NgModule } from '@angular/core';
import { AppModule } from '../app.module';

import { CallNumber } from '@ionic-native/call-number/ngx';
import { Clipboard } from '@ionic-native/clipboard/ngx';
import { SocialSharing } from '@ionic-native/social-sharing/ngx';


@Injectable({
  providedIn: 'root'
})


export class UssdactionService {

  constructor(private callNumber: CallNumber,
              private clipboard: Clipboard,
              private socialSharing: SocialSharing) { }


  callNow(number) {
    this.callNumber.callNumber(number, true)
      .then(res => console.log('Launched dialer!', res))
      .catch(err => console.log('Error launching dialer', err));
  }

  copyText(number){
    this.clipboard.copy(number);
    alert("copied");
  }

  share(number){
    this.socialSharing.share(number);
  }

}

I have to submit a demo in 2 days, is there any clear guide or tutorials on how to implement and reuse native plugins on multiple pages?. Thanks.

#2

First: This is not really a Native Plugin reuse topic. It is a general Code reusing Topic and a Service is the correct answer for it. You can read about services here: https://angular.io/tutorial/toh-pt4

I’m not sure if there is file structure defined, for where there should be saved, i don’t think so. In my projects i have this structure:

  /app
    /shared
      /components
      /services
        call-number.service
      /directives
      /pipes
      ...
  app.component-html
  ...

So i have a shared Folder for all the shared code, like Components, Pipes and Services.

Second: I don’t think it is a good idea to create a Service for all Native Plugin stuff. So basically why so you need a Function around the callNumber Function? Why don’t you call this Function directly where you need it? @ionic/native is a Wrapper Service! Creating a own is only useful if you have some additional logic.

2 Likes
#3

First, the rest of this post is meant in no way to throw shade on anything said in @EinfachHans’s post. It’s great, and even on the topic I’m going to disagree a bit with is a perfectly reasonable way of going about things.

That being said, I prefer to organize projects by what code does, not how it does it. So if I have a FooListComponent, a FooDetailComponent and a FooService that feeds the first two hot steaming bowls of Foo, I would put them all in the same directory, as opposed to shunting FooService off to live with the likes of BarService and BazService.

The most important takeaway from all this is that Angular is very forgiving about project structure. Put stuff where you expect to find it. If I find myself hunting for a class in the same wrong place more than twice, I move it there so there won’t be a third time.

1 Like
#4

I absolute agree with @rapropos - the most important thing is that it fits for you and you have a overview about your code

#5

Thanks for this. I read about services from the link you provided and I’m practicing it. I’m honestly quite new to Angular and Ionic so I know i need more practice. But do you go about reusing native plugins in the same way, or how do you usually go about reusing native?