open-index/open-npm huggingface dataset:
npm package: @mikelautensack/react-freelancer-kit
Description: Welcome to React Freelancer Kit, a react component and hook library to facilitate the rapid development of freelance react project quickly without sacraficing quality by encapsulating high quality typescript react into component and hooks.
Latest version: 0.0.15

# React Freelancer Kit

Welcome to React Freelancer Kit, a react component and hook library to facilitate the rapid development of freelance react project quickly without sacraficing quality by encapsulating high quality typescript react into component and hooks.
npm package: @mikelgo/my-test-lib
Description: This library was generated with [Nx](https://nx.dev).
Latest version: 0.0.3

# my-test-lib

This library was generated with [Nx](https://nx.dev).

## Building

Run `nx build my-test-lib` to build the library.

## Running unit tests

Run `nx test my-test-lib` to execute the unit tests via [Jest](https://jestjs.io).
npm package: @mikelgo/ng-types
Description: A utility library for Angular to handle strict types and some coercion helper
Latest version: 10.0.0

# ng-types

Tired of writing e.g. `@Input() arg: string | null | undefined` over and over again when using Angular's strict mode?

`ng-types` to the rescue! This handy lib provides a collection of types which will reflect strict inputs.

Besides that it offers some coercion helpers to make your life easier.

## Installation

```bash
npm i @mikelgo/ng-types
```

## Supported types
- `StringInput`
- `NumberInput`
- `BooleanInput`
- `DateInput`
- `ArrayInput`
- `ObjectInput`
- `FunctionInput`

## Coercion helpers
- `coerceBoolean`
- `coerceNumber`
- `coerceObservable`

## Compatibility
* Version 10.x.x is compatible with Angular >= 10.0.8
npm package: @mikelgo/ngx-destroy
Description: Utility service to manage subscriptions in a declarative way using takeUntil.
Latest version: 1.0.1

# ngx-destroy

Utility service to manage subscriptions in a declarative way using takeUntil.

To handle subscriptions in a declarative way usually you do have following code:

```typescript
import { OnDestroy } from '@angular/core';
import { interval, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators'
@Component({
  //...
})
export class SomeComponent implements OnDestroy {
  private readonly destroy$ = new Subject();

  constructor() {
    interval(1000)
      .pipe(takeUntil(this.destroy$))
      .subscribe(// do smth.)
  }
  
  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}
```

With `NgxDestroy` you reduce a lot of boilerplate:

```typescript
import { interval } from 'rxjs';
import { NgxDestroy } from '@mikelgo/ngx-destroy';

@Component({
  //...
  providers: [NgxDestroy]
})
export class SomeComponent {
  
  constructor(private readonly destroy$: NgxDestroy) {
    interval(1000)
      .pipe(takeUntil(this.destroy$))
      .subscribe(// do smth.)
  }
  
}
```
npm package: @mikelgo/ngx-dirty-checker
Description: A utility library to visualize dirty checks in Angular.
Latest version: 13.0.2

# ngx-dirty-checker

A utility library to visualize dirty checks in Angular.


### Install 

```bash
npm i @mikelgo/ngx-dirty-checker
```
### Usage

```html
<ngx-dirty-checker></ngx-dirty-checker>
```
Will render the number of dirty checks (re-renderings) of a component.
## Compatibility

Version 13.x.x is compatible with Angular 13.x.x.
npm package: @mikelgo/ngx-feature-toggle
Description: Lightweight library to enable/disable features in your Angular application for e.g. A/B testing
Latest version: 14.1.1

# ngx-feature-toggle

Configure your Angular apps easily with feature flags for e.g. A/B-testing.

## Installation

```bash
npm install @mikelgo/ngx-feature-toggle
```

## Usage
You will need to implement a service which implements the `FeatureProvider` interface and
then provide it with the `NGX_FEATURE_PROVIDER` token in your `app.module`. That's it for 
the configuration.

To use it you can simply: 
  
  ```typescript
<feature *ngxToggleFeature="'feat-a'; or 'feat-b'"> </feature>

```

## Compatibility
* Version 14.x.x is compatible with Angular >= 14.x.x
npm package: @mikelgo/ngx-list
Description: A generic and customizable list component for Angular.
Latest version: 14.1.0

# ngx-list

A generic and customizable list component for Angular.

## Why?

Lists are a very common UI component in almost every application. However,
to build a really generic and flexible list component in terms of the appearance of
the list items some advanced techniques are required.

## Features

- [x] OnPush change detection
- [x] Customizable list item
- [x] Customizable list item context
- [x] Generic
- [x] Tiny bundle size

## Usage

```typescript
// in some component
<ngx-list
    [items]="items"
  <ng-template [ngxListContext]="items" let-item let-active="active" let-selected="selected">
    <div (click)="onSelect(item)"
      class="border border-gray-300 shadow-lg rounded-lg bg-white px-10 py-8 mb-4"
        [class.item_active]="active"
        [class.item_selected]="selected"
        >
      <span >{{item.name}} | {{item.id}} </span>
    </div>
  </ng-template>
</ngx-list>


```


The Styles:

```scss
.item_active {
  @apply bg-gray-300/30;
}
.item_selected {
  @apply bg-blue-500/30;
}
```

## Compatibility

- version 14.0.0 is compatible with Angular v14.0.0 and higher
npm package: @mikelgo/ngx-loader
Description: A nice lib to show an overlay loading indicator.
Latest version: 13.0.1

# ngx-loader

A nice lib to show an overlay loading indicator.

### Install
```bash
npm i @mikelgo/ngx-loader
```

### Usage

Import the NgxLoaderModule in your app.module.ts

```typescript
import { NgxLoaderModule } from '@mikelgo/ngx-loader';

@NgModule({
  imports: [
    NgxLoaderModule
  ]
})
export class AppModule { }
```

Optionally you can pass a config object to the module to customize the loader.

```typescript
import { NgxLoaderModule } from '@mikelgo/ngx-loader';

@NgModule({
  imports: [
    NgxLoaderModule.forRoot({
      loaderComponent: MyCustomLoaderComponent,
      backdropClass: 'my-custom-backdrop-class'
    })
  ]
})
export class AppModule { }
```

Finally you will use it like this:

```typescript
<ngx-loader [show]='loading$ | async'>
  <ng-template>
    <div> Some content I want to show</div>
  </ng-template>
</ngx-loader>
```

### Compatibility
Version 13.x.x is compatible with Angular 13.x.x.

## Running unit tests

Run `nx test ngx-loader` to execute the unit tests.