NGX Log Monitor - Log Monitoring Component for Angular
DEMO: https://ngx-log-monitor.surge.sh
Installation and setup
Install:
npm i -S ngx-log-monitor
Import the module:
import {LogMonitorModule} from 'ngx-log-monitor';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
LogMonitorModule
],
bootstrap: [AppComponent]
})
export class AppModule { }Usage example
Log Message interface:
interface LogMessage {
type?: 'LOG' | 'INFO' | 'WARN' | 'ERR' | 'SUCCESS';
timestamp?: string;
message: string;
}- If the type isn't set, 'LOG' type will be used as default
- If timestamp isn't set, current locale date will be used
import {LogMessage as NgxLogMessage} from 'ngx-log-monitor';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent{
restoredLogs: NgxLogMessage[] = [
{message: 'A simple restored log message'},
{message: 'A success restored message', type: 'SUCCESS'},
{message: 'A warning restored message', type: 'WARN'},
{message: 'An error restored message', type: 'ERR'},
{message: 'An info restored message', type: 'INFO'},
];
logs: NgxLogMessage[] = [
{message: 'A simple log message'},
{message: 'A success message', type: 'SUCCESS'},
{message: 'A warning message', type: 'WARN'},
{message: 'An error message', type: 'ERR'},
{message: 'An info message', type: 'INFO'},
];
logStream$ = timer(0, 1000).pipe(
take(this.logs.length),
map(i => this.logs[i])
);
}
<log-monitor
[logStream]="logStream$ | async"
theme="dark"
title="NGRX action dispatch logs"
[animated]="true"
[icons]="true"
[history]="restoredLogs"
></log-monitor>logStream$ must be an observable that emits object literals conform to the LogMessage interface