Application wide Pipes (on beta 0.8 and up)

#1

I create a Pipe to do the translation until the angular-translate make it to ionic2.
I want this Pipe to be globally accessible from all other pages(components)

I followed the instruction in this post

But with the upgrade to beta .8 (now I have beta .9)
https://github.com/driftyco/ionic/blob/2.0/CHANGELOG.md#steps-to-upgrade-to-beta-8

The @App is replaced with @Component and the solution described in first post is not applicable.

`
///
import {Component} from ‘@angular/core’;
import {provide, PLATFORM_DIRECTIVES} from ‘@angular/core’;
import {Platform, ionicBootstrap} from ‘ionic-angular’;
import {StatusBar} from ‘ionic-native’;
import {TabsPage} from ‘./pages/tabs/tabs’;
import {LangBundle} from ‘./ts/langBundle’;
import {eigonic} from ‘./ts/eigonic-translator’;

@Component({
template: ‘<ion-nav [root]=“rootPage”>’,
providers: [AppServices.SharingService, AppServices.StoringService, provide(PLATFORM_DIRECTIVES, { useValue: [eigonic.Translator], multi: true })],
pipes: [eigonic.Translator]
})
export class MyApp {

private rootPage: any;

constructor(private platform: Platform) {
this.rootPage = TabsPage;

platform.ready().then(() => { 
  StatusBar.styleDefault();
  eigonic.Translator.init(LangBundle.MSG, 'ar');
});

}
}

ionicBootstrap(MyApp)

`

How to make custom pipes application-wide?
#2

Now that the @App decorator is gone, you need to put it in the bootstrapping function like you would with an Angular 2 app.

#3

Hi @luchillo17
Thanks for the reply

can you share code snippet?

#4

Sure thing, please notice that app wide service are put in the providers array as is, but app wide components needs to be provided to the PLATFORM_DIRECTIVES array before it can be passed to the providers array.

import {
  Component,
  provide,
  PLATFORM_DIRECTIVES,
  ViewChild,
  enableProdMode
} from '@angular/core'
import {ionicBootstrap, Platform, Nav} from 'ionic-angular'

import {
  Config,
  DB,
  MasterService,
  CustomerService,
  WalletService,
  NotificationService
} from './services/services'
import {BusyComponent, BusyCtrl, SyncCtrl, NotificatorComponent} from './components/components'

@Component({
  templateUrl: 'build/app.html'
})
class MyApp { ... }
ionicBootstrap(MyApp,
  [
    Config,
    DB,
    MasterService,
    CustomerService,
    WalletService,
    BusyCtrl,
    SyncCtrl,
    NotificationService,
    provide(PLATFORM_DIRECTIVES, {useValue: [BusyComponent, NotificatorComponent], multi: true})
  ])

Lastly anyone knows which is the best blogging site for making written tutorials? i want to make one about Ionic 2 Database versioning.

#5

Thanks for the reply, Still not working for me. Here is app.ts

import {Component} from ‘@angular/core’;
import {provide, PLATFORM_DIRECTIVES} from ‘@angular/core’;
import {Platform, ionicBootstrap} from ‘ionic-angular’;
import {StatusBar} from ‘ionic-native’;
import {TabsPage} from ‘./pages/tabs/tabs’;
import {AppServices} from ‘./ts/appServices’;
import {AppCore} from ‘./ts/core’;
import {Common} from ‘./ts/common’;
import {LangBundle} from ‘./ts/langBundle’;
import {eigonic} from ‘./ts/eigonic-translator’;

@Component({
template: ‘<ion-nav [root]=“rootPage”>’,
providers: [AppServices.SharingService, AppServices.StoringService],
pipes: [eigonic.Translator]
})
export class MyApp {
}

ionicBootstrap(MyApp, [provide(PLATFORM_DIRECTIVES, { useValue: [eigonic.Translator], multi: true })])

#6

First, app wide pipes also have to be used in the ionicBootstrap method.
Second, is eigonic a class? why using eigonic.Translator?, does that returns a directive, injectable or what?

#7

Hi Carl,
Thanks for the reply.

“eigonic” is module and “Translator” is a class

import {Pipe} from ‘@angular/core’;

export module eigonic {

@Pipe({ name: 'translate' })
export class Translator {
}

},

#8

Can help more if you show the error log.

#9

I TOLD you, the component decorator doesn’t accept the providers array for app wide pipes, you have to put the app wide pipes & providers in the ionicBootstrap providers like:

import {Component} from '@angular/core';
import {provide, PLATFORM_DIRECTIVES} from '@angular/core';
import {Platform, ionicBootstrap} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';
import {AppServices} from './ts/appServices';
import {AppCore} from './ts/core';
import {Common} from './ts/common';
import {LangBundle} from './ts/langBundle';
import {eigonic} from './ts/eigonic-translator';

@Component({
    template: ''
})
export class MyApp { ... }

ionicBootstrap(MyApp, [
    AppServices.SharingService, 
    AppServices.StoringService, 
    provide(PLATFORM_DIRECTIVES, { useValue: [eigonic.Translator], multi: true })
])

And for gods sake search how markdown format code, the lack of colors in your code makes it harder to read.