Example to use a Provider to create a Directive to use in a page?

Ionic Framework ionic-v3
1

I want to create a directive to be used in a page.
I hv done it in ionic2 and hving difficulty to do the same in ioinic3.

Goal is to create a provider that would replace the html tag with an ion-menu.

in Angular.io, the latest example is here:
https://angular.io/api/core/Directive

I however do not know how to split this into an independent service Provider and link it to a templateUrl that contains the ion-menu, then implement to the page.

Are there similar example or tutorial out there that do the similar?

2

In my opinion, service providers should only be involved with slinging data around and should not have anything to do with templates at all. I can’t think of a situation where service providers and directives should be related. Can you describe in more functional (as opposed to implementational) terms what you are really trying to achieve?

3

I hv a menu that would appear in many pages.
That menu will control language settings (a variable stored in a service provider)
When changes were made it will call to show and hide between 4 languaes (my app needs to allow swiping of language quick and easy on each page, for some reason i do not use Angular language i18n langauge becuz the app is more about switching between old and new Traditional Chinese text, so people can read between them and learn).

So I thought to create a directive to do quickly implement that menu to the page i needed.

I used an array to store the corresponding translation of each language, somthign like this:

title: {eng : 'Planning', ja: '第 一 始 計', chi: '始 計 第 一'}

and then in the page, I can use something like this to quickly load and switch between them:
<span class="labelcontent">{{chapter.title[lingu]}}</span>

You can see a working version here, the chrome version is free:

I worked on ionic2.0.0 beta-11 before and it’s so painful to get it updated and I got lots of errors trying to do so, I now tried to rewrote the whole thing in ionic3, but I got some trouble re-creating the same app maybe becuz my original architect hv some problems. I am new to coding so this is really complicated to me that it almost felt like a miracle I could get it done in ionic2, now I need to think how to code it in ionic3.

I appreciate if you could point out how I code this in a better manner.
I can share you the source code on bucket git if you wish to go hv a look.
https://ultradryan@bitbucket.org/ultradryan/cow.git