npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@witty-services/ngx-common

v9.0.0

Published

![ngx-common-ci](https://github.com/paddls/ngx-common/workflows/ngx-common-build/badge.svg) [![npm version](https://badge.fury.io/js/%40paddls%2Fngx-common.svg)](https://badge.fury.io/js/%40paddls%2Fngx-common) ![GitHub](https://img.shields.io/github/lice

Downloads

10

Readme

NgxCommon

ngx-common-ci npm version GitHub GitHub repo size GitHub last commit GitHub issues GitHub top language

Informations

:warning: Since version 2.0.3, ngx-common and rxjs-common have been published under @paddls namespace. We continue to maintain @witty-services namespace, but now, ngx-common depends on @paddls/rxjs-common

| Angular | NgxCommon | |--------------------|-------------------| | 18.0.0 and above | 9.0.0 and above | | 17.0.0 and above | 8.0.0 and above | | 16.0.0 and above | 7.0.0 and above | | 15.0.0 and above | 6.0.0 and above | | 14.0.0 and above | 5.0.0 and above | | 13.0.0 and above | 4.0.0 and above | | 12.0.0 and above | 3.0.0 and above | | 6.0.0 and above | 1.0.0 and above |

Summary

How to install

npm install --save @paddls/ngx-common

Get Started

@OnAttributeChange

Decorator @OnAttributeChange allow you to observe a class attribute with an observable.

Usage:

import { takeUntilDestroy, OnAttributeChange } from '@paddls/ngx-common';
import { Observable } from 'rxjs';

class MyComponent {

  public attribute: string;

  @OnAttributeChange('attribute')
  public myAttribute$: Observable<string>; // emit value on each modification of the referent attribute

  public constructor() {
    this.myAttribute$.pipe(
      takeUntilDestroy(this),
    ).subscribe(() => {
      // do some stuff
    });
  }
}

takeUntilDestroy

takeUntilDestroy will automatically unsubscribe any RxJS subscription on component or directive destruction.

Usage:

import { takeUntilDestroy, OnDestroyListener } from '@paddls/ngx-common';
import { interval } from 'rxjs';

@OnDestroyListener()
class MyComponent {

  public constructor() {
    interval(100).pipe(
      takeUntilDestroy(this), // this observable will be unsubscribed automatically on component destruction
    ).subscribe();
  }
}

Error handling

NgxErrorHandlerModule provides a robust error handling mechanism to handle error through your Angular app.

First, import NgxErrorHandlerModule in your root module :

import { NgxErrorHandlerModule } from '@paddls/ngx-common';

@NgModule({
  imports: [
    NgxErrorHandlerModule.forRoot([
      MyErrorHandler
    ]),
  ]
})
export class AppModule {
}

You can register a list of error handlers in the forRoot method of the module.

Here is an example of an error handler :

@Injectable()
export class DefaultHttpErrorHandler implements ErrorHandler {

  public handle(err: any): Observable<any> {
    // DO SOMETHING

    return throwError(err);
  }

  public canHandle(err: any): boolean {
    return true; // Filter errors
  }
}

You can specify as many handlers as you want. handle() methods will be called in order each time canHandle() method returns true.

To handle any RxJS error, simply add the handleError() operator to your Observable :

source$.pipe(
  handleError()
).subscribe()

Configuration provider

NgxConfigModule provides a wrapper to inject any app config retrieved by HTTP into your app. To start, simply import NgxConfigModule in your root module :

import { NgxConfigModule } from '@paddls/ngx-common';

@NgModule({
  imports: [
    NgxConfigModule.forRoot('https://my-config-url.com'),
  ]
})
export class AppModule {
}

Then, each time you need your app config through your app, inject NgxConfigService :

import { NgxConfigService } from '@paddls/ngx-common';

@Injectable()
export class MyService {

  public constructor(configService: NgxConfigService) {
    configService.getConfig('key').subscribe(console.log);
    
    console.log(configService.getConfigSnapshot('key'));
  }

}

Local storage service

NgxLocalStorageModule provides a wrapper to localStorage API that injects values into RxJS hot observables each time a value is updated into the storage. To start, simply import NgxLocalStorageModule in your root module :

import { NgxLocalStorageModule } from '@paddls/ngx-common';

@NgModule({
  imports: [
    NgxLocalStorageModule.forRoot(),
  ]
})
export class AppModule {
}

Then, use it like this :

import { NgxLocalStorageService } from '@paddls/ngx-common';

@Injectable()
export class MyService {

  public constructor(localStorageService: NgxLocalStorageService) {
    localStorageService.get('key').subscribe(console.log); // 'value'
    
    localStorageService.set('key', 'value').subscribe(console.log); // 'value'
    
    localStorageService.remove('key');
    
    localStorageService.clear();
  }

}

@Log

Decorator @Log allows you to debug method without modifying internal code.

Usage:

import { Log } from '@paddls/ngx-common';
import { environment } from '../../environment.ts';

class MyClass {

  @Log()
  public myMethod(): any {

  }

  @Log(!environment.production) // the log should be disabled on production
  public myMethod(): any {

  }

  @Log(true, 'red') // override default log color
  public myMethod(): any {

  }
}

new MyClass().myMethod();
// => should log duration, class, method, args and returned value