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

**URL:** <https://forum.ionicframework.com/t/example-to-use-a-provider-to-create-a-directive-to-use-in-a-page/96329>\
**Category:** ionic-v3\
**Created:** [June 29, 2017, 3:41pm UTC](https://forum.ionicframework.com/t/example-to-use-a-provider-to-create-a-directive-to-use-in-a-page/96329 "2017-06-29T15:41:51Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ultradryan](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ultradryan/32/101819_2.png) [@ultradryan](https://forum.ionicframework.com/u/ultradryan)\
**Post date:** [June 29, 2017, 3:41pm UTC](https://forum.ionicframework.com/t/example-to-use-a-provider-to-create-a-directive-to-use-in-a-page/96329/1 "2017-06-29T15:41:51Z")

</div>

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](http://Angular.io), the latest example is here:  
[https://angular.io/api/core/Directive](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?

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [June 30, 2017, 3:58am UTC](https://forum.ionicframework.com/t/example-to-use-a-provider-to-create-a-directive-to-use-in-a-page/96329/2 "2017-06-30T03:58:01Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![ultradryan](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ultradryan/32/101819_2.png) [@ultradryan](https://forum.ionicframework.com/u/ultradryan)\
**Post date:** [June 30, 2017, 6:01am UTC](https://forum.ionicframework.com/t/example-to-use-a-provider-to-create-a-directive-to-use-in-a-page/96329/3 "2017-06-30T06:01:24Z")

</div>

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:

```auto
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:

> **[The Cards of War: A graphic adaptation of
Suntzu's The Art of War 孫子兵法](http://cow.aforadrian.com/en/)**
>
> The Art of War Pictogram Illustration Cards. 孫子兵法超圖解

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](https://ultradryan@bitbucket.org/ultradryan/cow.git)