Introduction is a development platform for building WEB, mobile, and desktop applications using HTML, CSS, and TypeScript (JavaScript). Currently, Angular is at version 14, and Google is the main maintainer of the project. Angular is a simple log component library and allows messages to be displayed on the console and sent to the server using an HTTP request. ngx-logger Prerequisites Before you start, you need to install and configure the tools: git Node.js and npm Angular CLI IDE (e.g. ) Visual Studio Code Getting started Create the Angular Application Let’s create the application with the Angular base structure using the with the route file and the SCSS style format. 1. @angular/cli ng new angular-logger
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
CREATE angular-logger/README.md (1059 bytes)
CREATE angular-logger/.editorconfig (274 bytes)
CREATE angular-logger/.gitignore (604 bytes)
CREATE angular-logger/angular.json (3255 bytes)
CREATE angular-logger/package.json (1076 bytes)
CREATE angular-logger/tsconfig.json (783 bytes)
CREATE angular-logger/.browserslistrc (703 bytes)
CREATE angular-logger/karma.conf.js (1431 bytes)
CREATE angular-logger/tsconfig.app.json (287 bytes)
CREATE angular-logger/tsconfig.spec.json (333 bytes)
CREATE angular-logger/src/favicon.ico (948 bytes)
CREATE angular-logger/src/index.html (299 bytes)
CREATE angular-logger/src/main.ts (372 bytes)
CREATE angular-logger/src/polyfills.ts (2820 bytes)
CREATE angular-logger/src/styles.scss (80 bytes)
CREATE angular-logger/src/test.ts (788 bytes)
CREATE angular-logger/src/assets/.gitkeep (0 bytes)
CREATE angular-logger/src/environments/environment.prod.ts (51 bytes)
CREATE angular-logger/src/environments/environment.ts (658 bytes)
CREATE angular-logger/src/app/app-routing.module.ts (245 bytes)
CREATE angular-logger/src/app/app.module.ts (393 bytes)
CREATE angular-logger/src/app/app.component.scss (0 bytes)
CREATE angular-logger/src/app/app.component.html (24617 bytes)
CREATE angular-logger/src/app/app.component.spec.ts (1097 bytes)
CREATE angular-logger/src/app/app.component.ts (219 bytes)
✔ Packages installed successfully. Install and configure the Bootstrap CSS framework. Then, do steps 2 and 3 of the post, . 2. Adding the Bootstrap CSS framework to an Angular application Configure the log settings in the and files as below. 3. src/environments/environment.ts src/environments/environment.prod.ts logger: {
  level: 'TRACE',
}, Install the library. 4. ngx-logger npm install ngx-logger Import the and modules. Configure the log settings. Change the file and add the lines as below. 5. HttpClientModule LoggerModule app.module.ts import { HttpClientModule } from '@angular/common/http';
import { LoggerModule, NgxLoggerLevel } from 'ngx-logger';

import { environment } from '../environments/environment';

const environmentConfig: any = environment.logger;

imports: [
  BrowserModule,
  HttpClientModule,
  LoggerModule.forRoot({
    level: NgxLoggerLevel[environmentConfig.level],
    serverLogLevel: NgxLoggerLevel[environmentConfig.serverLevel],
    serverLoggingUrl: environmentConfig.serverUrl,
  } as any),
  AppRoutingModule,
], Remove the contents of the class from the file. Import the service and create the log levels methods as below. 6. AppComponent src/app/app.component.ts NGXLogger import { Component } from '@angular/core';
import { NGXLogger } from 'ngx-logger';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {

  constructor(private logger: NGXLogger) {
  }

  public showTrace(): void {
    this.logger.trace('TRACE level');
  }

  public showDebug(): void {
    this.logger.debug('DEBUG level');
  }

  public showInfo(): void {
    this.logger.info('INFO level');
  }

  public showWarn(): void {
    this.logger.warn('WARN level');
  }

  public showError(): void {
    this.logger.error('ERROR level');
  }

  public showFatal(): void {
    this.logger.fatal('FATAL level');
  }

} Remove the contents of the file. Add the log levels buttons as below. 7. src/app/app.component.html <div class="container-fluid py-3">
  <h1>Angular Logger</h1>
  <div class="d-grid gap-2 col-4 mt-4 mx-auto">
    <button type="button" class="btn btn-sm btn-primary" (click)="showTrace()">Trace</button>
    <button type="button" class="btn btn-sm btn-success" (click)="showDebug()">Debug</button>
    <button type="button" class="btn btn-sm btn-info" (click)="showInfo()">Info</button>
    <button type="button" class="btn btn-sm btn-warning" (click)="showWarn()">Warn</button>
    <button type="button" class="btn btn-sm btn-danger" (click)="showError()">Error</button>
    <button type="button" class="btn btn-sm btn-secondary" (click)="showFatal()">Fatal</button>
  </div>
  <p class="mt-4 text-center">
    <span class="fw-bold me-1">Note:</span>
    <span class="fst-italic">See the messages displayed in the browser console.</span>
  </p>
</div> Run the application with the command below. 8. npm start

> angular-logger@1.0.0 start
> ng serve

✔ Browser application bundle generation complete.

Initial Chunk Files | Names         |      Size
vendor.js           | vendor        |   2.55 MB
styles.css          | styles        | 266.58 kB
polyfills.js        | polyfills     | 128.51 kB
scripts.js          | scripts       |  76.67 kB
main.js             | main          |  14.41 kB
runtime.js          | runtime       |   6.63 kB

                    | Initial Total |   3.03 MB

Build at: 2021-09-04T19:25:20.982Z - Hash: dcc562d0e20cf029eab3 - Time: 12067ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully. Ready! Access the URL and check if the application is working. See the application working on and . 9. http://localhost:4200/ GitHub Pages Stackblitz The application repository is available at . https://github.com/rodrigokamada/angular-logger This tutorial was posted on my in Portuguese. blog

Google

Trace

I am creating content to share my knowledge and help people on their technology journey.

2021 - HackerNoon Contributor of the Year - WEB-DEVELOPMENT

2022 - HackerNoon Contributor of the Year - Amazon

2022 - HackerNoon Contributor of the Year - Angular

2022 - HackerNoon Contributor of the Year - Api

2022 - HackerNoon Contributor of the Year - Authentication

2022 - HackerNoon Contributor of the Year - Aws

2022 - HackerNoon Contributor of the Year - Github

2022 - HackerNoon Contributor of the Year - Website Development

2021 - HackerNoon Contributor of the Year - WEB

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Nominated for 2022 - HackerNoon Contributor of the Year - Angular

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for 2022 - HackerNoon Contributor of the Year - Amazon

Nominated for 2022 - HackerNoon Contributor of the Year - Github

Nominated for 2022 - HackerNoon Contributor of the Year - Authentication

Nominated for 2022 - HackerNoon Contributor of the Year - Aws

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Adding the log component to an Angular application

Adding the log component to an Angular application

Too Long; Didn't Read

Companies Mentioned

Rodrigo Kamada

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Adding the log component to an Angular application

Too Long; Didn't Read

Companies Mentioned

Rodrigo Kamada

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES