Viewer component for logs written by ionic-logging-service
npm install ionic-logging-viewerThe dependencies used by the latest version are the same as needed for Ionic 8.0.0. For older versions use:
| ionic-logging-viewer | Ionic | Angular
| ------ | -------- | ------
| 21.0.0 | >= 8.0.0 | >=21.0.0
| 18.0.0 | >= 7.0.0 | >=17.0.0
| 17.0.0 | >= 6.1.9 | ^16.0.0
| 16.0.0 | >= 6.1.9 | ^15.0.0
| 15.0.0 | >= 6.1.9 | ^14.0.0
| 14.0.0 | >= 6.0.0 | ^13.0.0
| 13.0.0 | >= 5.0.0 | ^12.0.0
| 12.0.0 | >= 5.0.0 | ^11.0.0
| 11.0.0 | >= 5.0.0 | ^10.0.0
| 9.0.0 | >= 5.0.0 | ^9.0.0
| 8.0.0 | >= 4.7.0 | ^8.0.0
| 2.0.0 | >= 4.0.0 | ^7.0.0
| 1.0.1 | >= 3.9.0 | ^5.0.0
The logging viewer is a small component which can be used in your Ionic app
for displaying the current logs, written by ionic-logging-service.
The viewer is meant for development and testing purposes, not for production.
It provides two components:
- LoggingViewerComponent:
can be embedded in any web page using the directive
- LoggingViewerModalComponent:
a complete implemented modal containing the LoggingViewerComponent
Additionally, there are two components for filtering the data:
- LoggingViewerLevelsComponent:
allows filtering by log level
- LoggingViewerSearchComponent:
allows filtering by an arbitrary expression
A sample app using these components is ionic-logging-viewer-app.
``bash`
npm install ionic-logging-viewer --save
Call configure() in your app.config.ts:
`TypeScript`
export const appConfig: ApplicationConfig = {
providers: [
...
provideAppInitializer(() => {
const loggingService = inject(LoggingService);
loggingService.configure(environment.logging);
}),
]
};
If you want to use the directive in one of your pages, just add
`html`
For filtering the log messages, you can add also these directives to your page.
It is recommended to include them in ion-toolbar, but it is not necessary:
`html`
`typescript`
public async openModal(): Promise
let componentProps: LoggingViewerModalProperties = { language: this.selectedLanguage };
const modal = await this.modalController.create({
component: LoggingViewerModalComponent,
componentProps: componentProps
});
await modal.present();
}
The LoggingViewerComponent does not need multi language support, since it justLoggingViewerLevelsComponent
displays the logged data. The same applies to
and .
But for the LoggingViewerModalComponent, multi language support is needed,loggingViewerModalManager.openModal()
since the modal contains some translatable texts. Therefore, has a language parameter, which you canen
use to select the language. Currently and de are supported.
If you need another language, either open an issue, or just use the translation parameter.LoggingViewerTranslation` object.
This parameter you can use to pass your completely own texts.
Just fill the
see API documentation.