Minor improvements to demo project

projects/demo/src/app/app.component.html

@@ -1,8 +1,10 @@
 <div style="text-align:center" class="content">
-<h1>
-	Welcome to {{title}}!
-</h1>
-<span style="display: block">{{ title }} app is running!</span>
-<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
+  <h1>
+    Welcome to {{title}}!
+  </h1>
+  <span style="display: block">{{ title }} app is running!</span>
+  <img width="300" alt="Angular Logo"
+    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
 </div>
+<p>Make sure you have the debugger console window open to see the logged messages 😉</p>
 <router-outlet></router-outlet>

projects/demo/src/app/child.page.ts

@@ -19,10 +19,10 @@ export class ChildPage implements OnInit, AfterViewInit {
   }
 
   public ngOnInit(): void {
-    this._log.info('OnInit lifecycle event triggered');
+    this._log.info('OnInit lifecycle event triggered in the child page');
   }
 
   public ngAfterViewInit(): void {
-    this._log.warn('AfterViewInit lifecycle event triggered (not really a warning but just shows the different levels :-))');
+    this._log.warn('AfterViewInit lifecycle event triggered in the child page(not really a warning but just shows the different levels :-))');
   }
 }

projects/demo/src/app/home.page.html

@@ -1,3 +1,3 @@
-<p>This page logs a couple of messages to the console from a logger initialized from a string (typically the component's name).</p>
+<p>This page logs a number of messages to the console from a logger initialized from a string (typically the component's name).</p>
 <p><a [routerLink]="['/child']">Click here</a> to go to a page that initializes the logger from the component itself</p>
 <p><a [routerLink]="['/log']">Click here</a> to go to a page that displays the log entries logged to LocalStorage</p>

projects/demo/src/app/home.page.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { Logger, LogService } from 'log4ngx';
 
@@ -11,18 +11,19 @@ import { Logger, LogService } from 'log4ngx';
     RouterLink
   ]
 })
-export class HomePage implements OnInit, AfterViewInit {
+export class HomePage implements OnInit {
   private readonly _log: Logger;
 
   constructor(logService: LogService) {
-    this._log = logService.getLogger('<HomePage component>');
+    /* Let's use a custom name for this logger */
+    this._log = logService.getLogger('<This is the HomePage>');
+    this._log.debug('This is a debug message logged in the constructor');
   }
 
   public ngOnInit(): void {
     this._log.info('OnInit lifecycle event triggered');
-  }
-
-  public ngAfterViewInit(): void {
-    this._log.warn('AfterViewInit lifecycle event triggered (not really a warning but just shows the different levels :-))');
+    this._log.warn('This is an example of a message logged at `warn` level');
+    this._log.error('Similarly, this is just an example of a message logged at `error` level');
+    this._log.fatal('And finally, an example of a messsage logged at `fatal` level');
   }
 }

projects/demo/src/environments/environment.ts

@@ -8,7 +8,7 @@ export const environment: Environment = {
     loggers: [
       {
         loggerName: '',
-        level: 'warn',
+        level: 'debug',   /* Normally higher in prod, but we want to show all messages for demo */
         appenderNames: [
           'console',
           'localstorage'