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.
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
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
I absolute agree with @rapropos - the most important thing is that it fits for you and you have a overview about your code
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?