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 |
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 directiveConfigurationViewerModalComponent
:
a complete implemented modal containing theConfigurationViewerComponent
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
orde
). 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..