ionic-configuration-viewerdeprecated

Viewer component for configuration data provided by ionic-configuration-service

Usage no npm install needed!

<script type="module">
  import ionicConfigurationViewer from 'https://cdn.skypack.dev/ionic-configuration-viewer';
</script>

README

ionic-configuration-viewer

The dependencies used by the latest version are the same as needed for Ionic 3.0.0. For older versions use:

ionic-configuration-viewer Ionic Angular
5.0.0 >= 3.9.0 ^5.0.0
4.1.1 >= 3.0.0 ^4.0.0
3.0.0 >= 2.2.0 ^2.4.8
2.0.3 >= 2.0.0 ^2.2.1

Build Codecov Version Downloads Dependencies Peer-Dependencies Dev-Dependencies Commitizen friendly Known Vulnerabilities License

The configuration viewer is a small component which can be used in your Ionic app for displaying the current configuration data, provided by ionic-configuration-service. The viewer is meant for development and testing purposes, not for production.

It provides 2 components:

  • ConfigurationViewerComponent:
    can be embedded in any web page using the directive
  • ConfigurationViewerModalComponent:
    a complete implemented modal containing the ConfigurationViewerComponent

A sample app using these components is ionic-configuration-sample.

Screenshots

Configuration Modal

Usage

npm package

npm install ionic-configuration-viewer --save

import module

Import the ConfigurationViewerModule in to your app.module.ts:

import { ConfigurationViewerModule } from "ionic-configuration-viewer";
...
@NgModule({
  imports: [
    IonicModule.forRoot(AppComponent),
    ConfigurationViewerModule
  ],
  ...
})

ConfigurationViewerComponent directive

If you want to use the directive in one of your pages, just add

<ionic-configuration-viewer></ionic-configuration-viewer>

ConfigurationViewerModalComponent modal

For sure, you can do the whole modal stuff by your own. But for your convenience, the is also the ConfigurationViewerModalManager, which you can get injected in your code:

constructor(
  private configurationViewerModalManager: ConfigurationViewerModalManager) {
    this.configurationViewerModalManager.modalClosed.subscribe(() => {
      // modal closed
  });
}

public openModal(): void {
  this.configurationViewerModalManager.openModal();
}

Currently, there is a problem with Ionic production builds (--prod argument). Therefore you have to disable the tree shaking in your app, when you want to use the modal.

For disabling tree shaking, just add the following configuration to your package.json:

"config": {
  "ionic_manual_treeshaking": false
},

multi language support

The ConfigurationViewerComponent does not need multi language support, since it just displays the configuration data.

But for the ConfigurationViewerModalComponent, multi language support is needed, since the modal contains some translatable texts. Therefore, configurationViewerModalManager.openModal() has a language parameter, which you can use to select the language. Currently en and de are supported.

If you need another language, either open an issue, or just use the translation parameter. This parameter you can use to pass your completely own texts. Just fill the ConfigurationViewerTranslation object.

API

openModal(language: string = undefined, translation: ConfigurationViewerTranslation = undefined): Promise<void>

Opens the modal.

Parameters

  • language: language used for the modal (currently only en or de). If translation is passed as well, the language will be ignored.
  • translation: custom values for the translatable texts.

Returns

  • Promise which gets resolved as soon as the modal is shown.

Example

manager.openModal(undefined, { title: "ttt", buttonCancel: "bc" })
  .then(() => {
  });

modalClosed: EventEmitter<void>

Event triggered when the modal was closed..