open-index/open-npm huggingface dataset:
npm package: @ngockhoi96/gohome
Description: A fast, configurable Git standup & activity reporting CLI with modern Cobra/Viper framework
Author: ngockhoi96
Latest version: 1.3.1

# gohome

A fast, configurable Git standup & activity reporting CLI written in Go.

## Installation

```bash
npm install -g @ngockhoi96/gohome
```

Or use npx without installation:

```bash
npx @ngockhoi96/gohome --help
```

## Quick Start

```bash
# Generate report for today
gohome

# Show last 3 days
gohome --days 3

# Custom workspace path
gohome --path ~/projects

# Copy to clipboard
gohome --copy
```

## Features

- **🚀 Auto-Discovery:** Recursively finds git repositories in your workspace
- **⚡ Concurrency:** Scans multiple repos in parallel using Goroutines
- **🎨 Rich Output:** Supports multiple formats (text, table) and styles
- **📋 Clipboard Ready:** Copy reports directly to your clipboard
- **📝 Custom Tasks:** Add manual tasks alongside git commits
- **⚙️ Smart Config:** Persist preferences via `~/.gohome.json` or CLI flags

## Documentation

Full documentation available at: https://github.com/anIcedAntFA/gohome

## License

MIT License - see LICENSE file for details
npm package: @ngocnn/react-material-alert
Description: A ReactJS alert component built on Material UI
Author: ngocnn1104
Latest version: 1.0.1

# react-material-alert

> A ReactJS alert component built on Material UI

[![NPM](https://img.shields.io/npm/v/@ngocnn/react-material-alert.svg)](https://www.npmjs.com/package/@ngocnn/react-material-alert) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
[Material-UI](https://material-ui.com/)

## Demo

[https://ngocnn1104.github.io/react-material-alert/](https://ngocnn1104.github.io/react-material-alert/)

## Install

```bash
npm install --save @ngocnn/react-material-alert
```

## Usage

```jsx
import React, { Component } from 'react'

import MaterialAlert from '@ngocnn/react-material-alert'

class Example extends Component {
  render () {
    return (
      <MaterialAlert text='This is a success alert' type='success' />
      <MaterialAlert text='This is a warning alert' type='warning' />
      <MaterialAlert text='This is an error alert' type='error' />
    )
  }
}
```

## License

MIT © [ngocnn1104](https://github.com/ngocnn1104)
npm package: @ngodings/ckeditor5-angular
Description: Ckeditor5 Angular with Latest Version
Latest version: 15.0.9

# @ngodings/ckeditor5-angular

Ckeditor5 Angular with Latest Version

## Demo - Angular v15

[https://npm.ngodings.com/packages/ngx-editor](https://npm.ngodings.com/packages/ngx-editor)

## Support Me

If you like this package I will be happy that you support me on Buy me a coffee :) <br />
Buy me coffee: [https://www.buymeacoffee.com/alidihaw](https://www.buymeacoffee.com/alidihaw) <br />
Indonesia People: [https://sociabuzz.com/dihaw](https://sociabuzz.com/dihaw)

## Development

### Prepare your environment
* Install [Node.js](http://nodejs.org/) and NPM
* Install local dev dependencies: `npm install` while current directory is this repo

## License

MIT @ Ali Abdul Wahid
npm package: @ngodings/ngx-copy
Description: Simple copy from text, value input & text inside element in Angular
Latest version: 15.0.9

# @ngodings/ngx-copy

Simple copy from text, value input & text inside element in Angular

## Demo - Angular v15

[https://npm.ngodings.com/packages/ngx-copy](https://npm.ngodings.com/packages/ngx-copy)

## Support Me

If you like this package I will be happy that you support me on Buy me a coffee :) <br />
Buy me coffee: [https://www.buymeacoffee.com/alidihaw](https://www.buymeacoffee.com/alidihaw) <br />
Indonesia People: [https://sociabuzz.com/dihaw](https://sociabuzz.com/dihaw)

## Getting Started

### Installing and Importing

Install the package by command:

```sh
 npm install @ngodings/ngx-copy --save
```

Import the module

```ts
import { NgxCopyDirective } from "@ngodings/ngx-copy";

@NgModule({
    imports: [
        ...
        NgxCopyDirective
    ],
    declarations: [...],
    providers: [...]
})
export class AppModule {}
```

### Usage 

From input

```html
<input type='text' ngxCopy #cp="copy"/>

<button (click)="cp.copy()">Copy</button>
```

From any HTML tag

```html
<p ngxCopy #cp="copy">Lorem ipsum</p>

<button (click)="cp.copy()">Copy</button>
```

From complex div

```html
<div ngxCopy #cp="copy">
  <h1>Lorem ipsum</h1>
  <p>Lorem ipsum dolor sit amet, consectetur 
  adipiscing elit.
 Nullam rutrum augue at ante sollicitudin posuere.
 Pellentesque congue consequat enim quis luctus.</p>
  <div>
    <h2>Lorem ipsum</h2>
  </div>
</div>

<button (click)="cp.copy()">Copy</button>
```
Also you can bind it to any tag

```html
<p ngxCopy #cp="copy">Lorem ipsum</p>

<p (click)="cp.copy()">Copy</p>
```

## Development

### Prepare your environment
* Install [Node.js](http://nodejs.org/) and NPM
* Install local dev dependencies: `npm install` while current directory is this repo

## License

MIT @ Ali Abdul Wahid
npm package: @ngodings/ngx-country
Description: Simple get all country, get country by code/abbreviation, get code by country, get bbreviation by country & easy use pipe in Angular
Latest version: 15.0.9

# @ngodings/ngx-country

Simple get all country, get country by code/abbreviation, get code by country, get bbreviation by country & easy use pipe in Angular

## Demo - Angular v15

[https://npm.ngodings.com/packages/ngx-country](https://npm.ngodings.com/packages/ngx-country)

## Support Me

If you like this package I will be happy that you support me on Buy me a coffee :) <br />
Buy me coffee: [https://www.buymeacoffee.com/alidihaw](https://www.buymeacoffee.com/alidihaw)<br />
Indonesia People: [https://sociabuzz.com/dihaw](https://sociabuzz.com/dihaw)

## Getting Started

### Installing and Importing

Install the package by command:

```sh
 npm install @ngodings/ngx-country --save
```

Import the module

```ts
import { NgxCountryModule, CountryService } from "@ngodings/ngx-country";

@NgModule({
    imports: [
        ...
        NgxCountryModule
    ],
    declarations: [...],
    providers: [
        ...
        CountryService
    ]
})
export class AppModule {}
```

### Usage 

Import the service

```ts
constructor(private countryService: CountryService,) {}
```

## Get All Countries

```ts
await this.countryService.getCountries();
```

## Get All Country Codes

```ts
await this.countryService.getCountryCodes();
```

## Get Abbreviation By Country

```ts
await this.countryService.getAbbreviationByCountry('Singapore');
```

## Get Code By Country

```ts
await this.countryService.getCodeByCountry('Singapore');
```

## Get Country By Code

```ts
await this.countryService.getCountryByCode('+65');
```

## Get Country By Abbreviation

```ts
await this.countryService.getCountryByAbbreviation('SG');
```

## Get Country By Abbreviation - Pipe

```html
{{ 'SG'| countryByAbbreviationPipe | async }}
```

## Get Abbreviation By Country - Pipe

```html
{{ 'Singapore'| abbreviationByCountryPipe | async }}
```

## Get Country By Code - Pipe

```html
{{ '+65'| countryByCodePipe | async }}
```

## Get Code By Country - Pipe

```html
{{ 'Singapore'| codeByCountryPipe | async }}
```

## Development

### Prepare your environment
* Install [Node.js](http://nodejs.org/) and NPM
* Install local dev dependencies: `npm install` while current directory is this repo

## License

MIT @ Ali Abdul Wahid
npm package: @ngodings/ngx-device
Description: Angular mockup device for Iphone, Android, Ipad and Macbook with customize content
Latest version: 15.0.9

# @ngodings/ngx-device

Angular mockup device for Iphone, Android, Ipad and Macbook with customize content

## Demo - Angular v15

[https://npm.ngodings.com/packages/ngx-device](https://npm.ngodings.com/packages/ngx-device)

## Support Me

If you like this package I will be happy that you support me on Buy me a coffee :) <br />
Buy me coffee: [https://www.buymeacoffee.com/alidihaw](https://www.buymeacoffee.com/alidihaw) <br />
Indonesia People: [https://sociabuzz.com/dihaw](https://sociabuzz.com/dihaw)

## Getting Started

### Installing and Importing

Install the package by command:

```sh
 npm install @ngodings/ngx-device --save
```

Import the module

```ts
import { NgxDeviceModule } from "@ngodings/ngx-device";

@NgModule({
    imports: [
        ...
        NgxDeviceModule
    ],
    declarations: [...],
    providers: [...]
})
export class AppModule {}
```

### Usage 

<p align="center">
  <img height="600" src="https://raw.githubusercontent.com/alidihaw/ngodings/master/packages/ngx-device/public/sample.png">
</p>

Iphone X

```html
<ngx-device [device]="'iphone-x'">Your Content</ngx-device>
```

Note 8

```html
<ngx-device [device]="'note8'">Your Content</ngx-device>
```

Iphone 8

```html
<ngx-device [device]="'iphone8'">Your Content</ngx-device>`
```

Iphone 8 Plus

```html
<ngx-device [device]="'iphone8plus'">Your Content</ngx-device>
```

Iphone 5s

```html
<ngx-device [device]="'iphone5s'">Your Content</ngx-device>
```

Ipad


```html
<ngx-device [device]="'ipad'">Your Content</ngx-device>
``

Nexus 5

```html
<ngx-device [device]="'nexus5'">Your Content</ngx-device>
```

Macbook

```html
<ngx-device [device]="'macbook'">Your Content</ngx-device>
```

### Option (Input & Output)

| name | description | default value   |
| :---------- | :------------------------------------------------------------ | :-------------- |
| device | Device Type | iphone-x |

## Development

### Prepare your environment
* Install [Node.js](http://nodejs.org/) and NPM
* Install local dev dependencies: `npm install` while current directory is this repo

## License

MIT @ Ali Abdul Wahid
npm package: @ngodings/ngx-editor
Description: Angular package for Editor, easy to use (Support Mention & Tagging)
Latest version: 15.0.9

# @ngodings/ngx-editor

Angular package for Editor, easy to use (Support Mention & Tagging) from ckeditor5

## Demo - Angular v15

[https://npm.ngodings.com/packages/ngx-editor](https://npm.ngodings.com/packages/ngx-editor)

## Support Me

If you like this package I will be happy that you support me on Buy me a coffee :) <br />
Buy me coffee: [https://www.buymeacoffee.com/alidihaw](https://www.buymeacoffee.com/alidihaw) <br />
Indonesia People: [https://sociabuzz.com/dihaw](https://sociabuzz.com/dihaw)

## Getting Started

### Installing and Importing

Install the package by command:

```sh
 npm install @ngodings/ngx-editor --save
```

Import the module

```ts
import { NgxEditorModule } from "@ngodings/ngx-editor";

@NgModule({
    imports: [
        ...
        NgxEditorModule
    ],
    declarations: [...],
    providers: [...]
})
export class AppModule {}
```

Set types editor - inside src folder - create file types.d.ts
```ts
declare module '@ngodings/ckeditor5' {
    const ClassicEditorBuild: any;

    export default ClassicEditorBuild;
}

```

### Usage 

<p align="center">
  <img width="800" src="https://raw.githubusercontent.com/alidihaw/ngodings/master/packages/ngx-editor/public/sample1.png">
</p>

Editor (Support Tagging # & Mention @)

```html
<ngx-editor [(data)]="text" [tags]="tags" [mentions]="mentions"></ngx-editor>
```

Editor Simple

```html
<ngx-editor [(data)]="text" [tags]="tags" [mentions]="mentions" [isSimple]="true"></ngx-editor>
```

### Option (Input & Output)

| name | description | default value   |
| :---------- | :------------------------------------------------------------ | :-------------- |
| data | text data | |
| tags | Data tags trigger by @ | [] |
| mentions | Data mentions trigger by @ | []  |
| isSimple | Simple Toolbar | false |
| dataChange | Callback text data |  |

Editor View Result

```html
<ngx-view-editor [data]="text"></ngx-view-editor>
```

### Option (Input & Output)

| name | description | default value   |
| :---------- | :------------------------------------------------------------ | :-------------- |
| data | text data | |
| customClass | Custom view inner html | |

## Development

### Prepare your environment
* Install [Node.js](http://nodejs.org/) and NPM
* Install local dev dependencies: `npm install` while current directory is this repo

## License

MIT @ Ali Abdul Wahid
npm package: @ngodings/ngx-interceptor
Description: Angular HTTP Interceptor for Error Handling & Header Authorization
Latest version: 15.0.9

# @ngodings/ngx-interceptor

Angular HTTP Interceptor for Error Handling & Header Authorization

## Demo - Angular v15

[https://npm.ngodings.com/packages/ngx-interceptor](https://npm.ngodings.com/packages/ngx-interceptor)

## Support Me

If you like this package I will be happy that you support me on Buy me a coffee :) <br />
Buy me coffee: [https://www.buymeacoffee.com/alidihaw](https://www.buymeacoffee.com/alidihaw) <br />
Indonesia People: [https://sociabuzz.com/dihaw](https://sociabuzz.com/dihaw)

## Getting Started

### Installing and Importing

Install the package by command:

```sh
 npm install @ngodings/ngx-interceptor --save
```

Import the module

```ts
@NgModule({
    imports: [...],
    declarations: [...],
    providers: [
      ...
      { provide: HTTP_INTERCEPTORS, useClass: NgxHttpHeaderInterceptor, multi: true },
      { provide: HTTP_INTERCEPTORS, useClass: NgxHttpErrorInterceptor, multi: true },
    ]
})
export class AppModule {}
```

Save token to local storage or session storage with key token

## Development

### Prepare your environment
* Install [Node.js](http://nodejs.org/) and NPM
* Install local dev dependencies: `npm install` while current directory is this repo

## License

MIT @ Ali Abdul Wahid
npm package: @ngodings/ngx-ip
Description: Simple get your ip in Angular
Latest version: 15.0.9

# @ngodings/ngx-ip

Simple get your ip in Angular

## Demo - Angular v15

[https://npm.ngodings.com/packages/ngx-ip](https://npm.ngodings.com/packages/ngx-ip)

## Support Me

If you like this package I will be happy that you support me on Buy me a coffee :) <br />
Buy me coffee: [https://www.buymeacoffee.com/alidihaw](https://www.buymeacoffee.com/alidihaw)<br />
Indonesia People: [https://sociabuzz.com/dihaw](https://sociabuzz.com/dihaw)

## Getting Started

### Installing and Importing

Install the package by command:

```sh
 npm install @ngodings/ngx-ip --save
```

Import the module

```ts
import { NgxIPModule, IPService } from 'packages/ngx-ip/src/public-api';

@NgModule({
    imports: [
        ...
        NgxIPModule
    ],
    declarations: [...],
    providers: [
        ...
        IPService
    ]
})
export class AppModule {}
```

### Usage 

Import the service

```ts
constructor(private ipService: IPService,) {}
```

## Get IP

```ts
this.ipService.getIP()
```

## Development

### Prepare your environment
* Install [Node.js](http://nodejs.org/) and NPM
* Install local dev dependencies: `npm install` while current directory is this repo

## License

MIT @ Ali Abdul Wahid
npm package: @ngodings/ngx-rupiah
Description: Angular directive mask for currency Rupiah/IDR support for NgModule or Reactive forms, pipe for currency Rupiah/IDR & pipe for terbilang in Rupiah/IDR
Latest version: 15.0.9

# @ngodings/ngx-rupiah

Angular directive mask for currency Rupiah/IDR support for NgModule or Reactive forms, pipe for currency Rupiah/IDR & pipe for terbilang in Rupiah/IDR

## Demo - Angular v15

[https://npm.ngodings.com/packages/ngx-rupiah](https://npm.ngodings.com/packages/ngx-rupiah)

## Support Me

If you like this package I will be happy that you support me on Buy me a coffee :) <br />
Buy me coffee: [https://www.buymeacoffee.com/alidihaw](https://www.buymeacoffee.com/alidihaw)<br />
Indonesia People: [https://sociabuzz.com/dihaw](https://sociabuzz.com/dihaw)

## Getting Started

### Installing and Importing

Install the package by command:

```sh
 npm install @ngodings/ngx-rupiah --save
```

Import the module

```ts
import { NgxRupiahModule } from "@ngodings/ngx-rupiah";

@NgModule({
    imports: [
        ...
        NgxRupiahModule
    ],
    declarations: [...],
    providers: [...]
})
export class AppModule {}
```

### Usage 

```html
<input rupiahMask formControlName="value" />
```

 * `ngModel` An attribute of type number. If is displayed `'Rp 5000'`, the attribute will be `'5000'`.

## Terbilang Function
- 1250000 = Satu Juta Dua Ratus Lima Puluh Ribu Rupiah
- 25000000 = Dua Puluh Lima Juta Rupiah
- 5000 = Lima Ribu Rupiah

```ts
this.rupiahService.getTerbilang(1250000);
this.rupiahService.getTerbilang(25000000);
this.rupiahService.getTerbilang(5000);
```

Import the service

```ts
constructor(private rupiahService: RupiahService,) {}
```


## Terbilang Pipe
- 1250000 = Satu Juta Dua Ratus Lima Puluh Ribu Rupiah
- 25000000 = Dua Puluh Lima Juta Rupiah
- 5000 = Lima Ribu Rupiah

```html
{{ 1250000 | terbilangPipe }}
{{ 25000000 | terbilangPipe }}
{{ 5000 | terbilangPipe }}
```

## Rupiah Pipe
- 1250000 = Rp1.250.000,00
- 25000000 = Rp25.000.000,00
- 5000 = Rp5.000,00

```html
{{ 1250000 | rupiahPipe }}
{{ 25000000 | rupiahPipe }}
{{ 5000 | rupiahPipe }}
```

## Development

### Prepare your environment
* Install [Node.js](http://nodejs.org/) and NPM
* Install local dev dependencies: `npm install` while current directory is this repo

## License

MIT @ Ali Abdul Wahid
npm package: @ngodings/ngx-scroll-to-top
Description: Simple floating button for scroll to top in Angular
Latest version: 15.0.9

# @ngodings/ngx-scroll-to-top

Simple floating button for scroll to top in Angular

## Demo - Angular v15

[https://npm.ngodings.com/packages/ngx-scroll-to-top](https://npm.ngodings.com/packages/ngx-scroll-to-top)

## Support Me

If you like this package I will be happy that you support me on Buy me a coffee :) <br />
Buy me coffee: [https://www.buymeacoffee.com/alidihaw](https://www.buymeacoffee.com/alidihaw) <br />
Indonesia People: [https://sociabuzz.com/dihaw](https://sociabuzz.com/dihaw)

## Getting Started

### Installing and Importing

Install the package by command:

```sh
 npm install @ngodings/ngx-scroll-to-top --save
```

Import the module

```ts
import { NgxScrollToTopModule } from "@ngodings/ngx-scroll-to-top";

@NgModule({
    imports: [
        ...
        NgxScrollToTopModule
    ],
    declarations: [...],
    providers: [...]
})
export class AppModule {}
```

### Usage 

<p align="center">
  <img width="800" src="https://raw.githubusercontent.com/alidihaw/ngodings/master/packages/ngx-scroll-to-top/public/sample1.png">
</p>

Scroll to Top Floating

```html
<ngx-scroll-to-top [bottomPosition]="'100px'" [rightPosition]="'20px'"></ngx-scroll-to-top>
```

### Option (Input & Output)

| name | description | default value   |
| :---------- | :------------------------------------------------------------ | :-------------- |
| phoneNumber | Your scroll-to-top number | |
| message | Default message send text | |
| bottomPosition | Configuration Position Floating Button for Bottom | 100px |
| rightPosition | Configuration Position Floating Button for Right | 20px |

## Development

### Prepare your environment
* Install [Node.js](http://nodejs.org/) and NPM
* Install local dev dependencies: `npm install` while current directory is this repo

## License

MIT @ Ali Abdul Wahid
npm package: @ngodings/ngx-timezone
Description: Easy for get All Timezone, detect your timezone, convert timezone to country & get all timezone by country in Angular
Latest version: 15.0.9

# @ngodings/ngx-timezone

Easy for get All Timezone, detect your timezone, convert timezone to country & get all timezone by country in Angular

## Demo - Angular v15

[https://npm.ngodings.com/packages/ngx-timezone](https://npm.ngodings.com/packages/ngx-timezone)

## Support Me

If you like this package I will be happy that you support me on Buy me a coffee :) <br />
Buy me coffee: [https://www.buymeacoffee.com/alidihaw](https://www.buymeacoffee.com/alidihaw)<br />
Indonesia People: [https://sociabuzz.com/dihaw](https://sociabuzz.com/dihaw)

## Getting Started

### Installing and Importing

Install the package by command:

```sh
 npm install @ngodings/ngx-timezone --save
```

Import the module

```ts
import { NgxTimezoneModule, TimezoneService } from "@ngodings/ngx-timezone";

@NgModule({
    imports: [
        ...
        NgxTimezoneModule
    ],
    declarations: [...],
    providers: [
        ...
        TimezoneService
    ]
})
export class AppModule {}
```

### Usage 

Import the service

```ts
constructor(private timezoneService: TimezoneService,) {}
```

## Your timezone

```ts
this.timezoneService.timezone;
```

## Convert Timezone to Country

```ts
await this.timezoneService.convertTimezoneToCountry('Asia/Jakarta');
```

## Convert Timezone to Country - Pipe

```html
{{ 'Asia/Jakarta'| timezoneToCountryPipe | async }};
```

## List Timezones from Country

```ts
await this.timezoneService.getListTimezoneFromCountry('Indonesia')
```

## List Timezones

```ts
await this.timezoneService.getListTimezones()
```

## Development

### Prepare your environment
* Install [Node.js](http://nodejs.org/) and NPM
* Install local dev dependencies: `npm install` while current directory is this repo

## License

MIT @ Ali Abdul Wahid
npm package: @ngodings/ngx-whatsapp
Description: Simple floating button to send whatsapp for your business/sales in Angular
Latest version: 15.0.9

# @ngodings/ngx-whatsapp

Simple floating button to send whatsapp for your business/sales in Angular

## Demo - Angular v15

[https://npm.ngodings.com/packages/ngx-whatsapp](https://npm.ngodings.com/packages/ngx-whatsapp)

## Support Me

If you like this package I will be happy that you support me on Buy me a coffee :) <br />
Buy me coffee: [https://www.buymeacoffee.com/alidihaw](https://www.buymeacoffee.com/alidihaw) <br />
Indonesia People: [https://sociabuzz.com/dihaw](https://sociabuzz.com/dihaw)

## Getting Started

### Installing and Importing

Install the package by command:

```sh
 npm install @ngodings/ngx-whatsapp --save
```

Import the module

```ts
import { NgxWhatsappModule } from "@ngodings/ngx-whatsapp";

@NgModule({
    imports: [
        ...
        NgxWhatsappModule
    ],
    declarations: [...],
    providers: [...]
})
export class AppModule {}
```

### Usage 

<p align="center">
  <img width="800" src="https://raw.githubusercontent.com/alidihaw/ngodings/master/packages/ngx-whatsapp/public/sample1.png">
</p>

Whatsapp Floating Button

```html
<ngx-whatsapp [phoneNumber]="'+6285280871948'" [message]="'Hi, i need help about ... '" [bottomPosition]="'100px'" [rightPosition]="'20px'"></ngx-whatsapp>
```

### Option (Input & Output)

| name | description | default value   |
| :---------- | :------------------------------------------------------------ | :-------------- |
| phoneNumber | Your whatsapp number | |
| message | Default message send text | |
| bottomPosition | Configuration Position Floating Button for Bottom | 100px |
| rightPosition | Configuration Position Floating Button for Right | 20px |

## Development

### Prepare your environment
* Install [Node.js](http://nodejs.org/) and NPM
* Install local dev dependencies: `npm install` while current directory is this repo

## License

MIT @ Ali Abdul Wahid
npm package: @ngox/logx
Description: Log package for JS & TS
Author: Daniel Gonzalez Lopez
Latest version: 1.0.1

# Logx

A Node.js module for logging purposes. Easily log to the console, having always the same formatting:

```sh
[TYPE_OF_LOG]: [DATE] [MESSAGE]
```

Examples:

![Some examples](assets/examples.png)

## Installation

To install this package, simply type the following command in your terminal:

```sh
npm i @ngox/logx
```

Of course, `npm` must be installed on your computer.

## Usage

### Javascript

```javascript
var Logger = require('xxx').Logger;
var LEVEL = require('xxx').LEVEL;

Logger.log('Foo');
Logger.logx(LEVEL.ERROR, 'Bar');
```

### TypeScript

```typescript
import { LEVEL, Logger } from 'xxx';

Logger.log('Foo');
Logger.logx(LEVEL.ERROR, 'Bar');
```

### Output expected

![Output expected](assets/output.png)

## Test

```sh
npm run test
```
npm package: @ngoylufo/filer
Description: A simple file reader/writer for node.
Author: Ngoy Pedro C. Lufo
Latest version: 0.5.3

# Filer

Filer is a simple file reader/writer for node.

## Installation

If you happened to have stumbled upon this and have some time to kill, installing filer isn't too complicated. Also I couldn't think of a different name.

```sh
npm install @ngoylufo/filer
```

## Usage

Filer only has two use cases, reading and writing to files. If want to order pizza whilst on the toilet, you've come to the wrong place.

### Require filer, preferably, at the top of your file

```js
const filer = require('@ngoylufo/filer');
```

Now you can read and write files.

```js
const package = filer.readFileSync({ filename: `${__dirname}/package.json` });
console.log(package); // <Buffer ...>

filer
  .readFile({
    filename: `${__dirname}/app/index.html`
  })
  .then(text => {
    console.log(text); // <Buffer ...>
  })
  .catch(err => {
    console.log('Something went wrong');
  });

// Returns a <Buffer >.
filer.readFileSync('sample.py');
```

### [Optional] Register some formats for default behaviour

```js
// How to deal with .json files.
filer.formats.register({
  extension: '.json',
  attributes: {
    reader: {
      options: { encoding: 'utf8' }
      coerce: buffer => JSON.parse(buffer.toString())
    },
    writer: {
      coerce: data => typeof data === 'string' ? data : JSON.stringify(data)
    }
  }
});

// Multiple formats following the same rules.
filer.formats.register({
  extension: ['.html', '.css', '.txt'],
  attributes: {
    reader: { options: { encoding: 'utf8' } },
    writer: { options: { encoding: 'utf8' } },
  }
});

const package = filer.readFileSync({ filename: `${__dirname}/package.json` });
console.log(package.name); // @ngoylufo/filer

filer.writeFile({
  filename: `${__dirname}/index.html`,
  data: '<!doctype html>'
}).then(() => {
  console.log('Wrote to file, now reading from file...');
  filer
    .readFile({ filename: `${__dirname}/index.html` })
    .then(data => {
      console.log(data); // <!doctype html>
    }).catch((contents) => {
      // contents === undefined not an error. At least not yet.
      console.log('Something went wrong!');
    });
});

// Unregistered format, returns a <Buffer ...>, if file exists.
filer.readFileSync('sample.py');
```

## API

Coming soon...

## License

This project is under the MIT License - see the [LICENSE](LICENSE) details.
npm package: @ngpack/hmr
Description: extends ngpack-based webpack configuration with HMR
Author: Merott Movahedi
Latest version: 0.0.1-alpha.1

extends ngpack-based webpack configuration with HMR

## Installation

```
npm i -D @ngpack/hmr
```

## Usage

1. Add `@ngpack/hmr` to your config via [`ngpack#add`](../../#ngpackadd)
2. From your root app module's constructor, require `@ngpack/hmr` and call
`enable`, passing it the instance of the module and the application ref:

    ```ts
    import { NgModule, ApplicationRef } from '@angular/core';

    @NgModule({
      ...
    })
    export class AppModule {
      constructor(appRef: ApplicationRef) {
        require('@ngpack/hmr').enable(this, appRef);
      }
    }
    ```
npm package: @ngpakistan/smart-ui
Description: Simple UI Components created for the Angular Pakistan Components Workshop
Author: Obaid
Latest version: 1.1.0

# Smart UI - Sample Angular Component Library

<img src="https://github.com/ObaidUrRehman/angular-component-workshop/blob/master/demo/src/assets/demo.gif" alt="Angular Pakistan" style="width: 200px;"/>

This is a sample Angular UI Components library  created for the Angular Pakistan Components Workshop 1 by Obaid ur Rehman & Anas.R.Firdousi.

## Prerequisites

Its reccommended the you install the [Angular CLI](https://github.com/angular/angular-cli) if you intend to run or build the demo app seperately.

`npm install -g @angular/cli`

## Set up the project
To begin follow these steps:
* Clone this project: `git clone https://github.com/angular-pakistan/angular-component-workshop.git`
* `npm install` on the root of this repo
* `npm install` in the `demo` folder.
* `npm start` on the root of repo to serve the app.
* Point your browser to `http://localhost:4200/`

Looking good? :tada:

## Resources

[Link to workshop slide]() - Coming Soon
npm package: @ngpat/calculations
Description: Angular Calculations.
Latest version: 17.0.2

# @ngpat/calculations

Angular Calculations.

## References
- [MathJS](https://github.com/josdejong/mathjs)
- [ComplexJS](https://github.com/infusion/Complex.js.git)
- [FractionJS](https://github.com/infusion/Fraction.js.git)
- [Infusion Repositories](https://github.com/infusion?tab=repositories)


## Demo Site

See [ng-patterns.web.app](https://ng-patterns.web.app/)

## All Ngpat Libraries

- [@ngpat/calculations](https://ngpat-docs-calculations.web.app/index.html)
- [@ngpat/charts](https://ngpat-docs-charts.web.app/index.html)
- [@ngpat/data](https://ngpat-docs-data.web.app/index.html)
- [@ngpat/date](https://ngpat-docs-date.web.app/index.html)
- [@ngpat/feature-flag](https://ngpat-docs-feature-flag.web.app/index.html)
- [@ngpat/firebase](https://ngpat-docs-firebase.web.app/index.html)
- [@ngpat/fn](https://ngpat-docs-fn.web.app/index.html)
- [@ngpat/material](https://ngpat-docs-material.web.app/index.html)
- [@ngpat/nx-ng-mat-prototype](https://ngpat-docs-nx-ng-mat-prototype.web.app/index.html)
- [@ngpat/rxjs](https://ngpat-docs-rxjs.web.app/index.html)
- [@ngpat/schematics](https://ngpat-docs-schematics.web.app/index.html)
- [@ngpat/store](https://ngpat-docs-store.web.app/index.html)
- [@ngpat/utils](https://ngpat-docs-utils.web.app/index.html)
npm package: @ngpat/charts
Description: Angular Charts based on the [angular material design library](https://material.angular.io/components/categories) component guide.
Latest version: 17.0.2

# @ngpat/charts

Angular Charts based on the [angular material design library](https://material.angular.io/components/categories) component guide. 

## Demo Site

See [ng-patterns.web.app](https://ng-patterns.web.app/)

## All Ngpat Libraries

- [@ngpat/calculations](https://ngpat-docs-calculations.web.app/index.html)
- [@ngpat/charts](https://ngpat-docs-charts.web.app/index.html)
- [@ngpat/data](https://ngpat-docs-data.web.app/index.html)
- [@ngpat/date](https://ngpat-docs-date.web.app/index.html)
- [@ngpat/feature-flag](https://ngpat-docs-feature-flag.web.app/index.html)
- [@ngpat/firebase](https://ngpat-docs-firebase.web.app/index.html)
- [@ngpat/fn](https://ngpat-docs-fn.web.app/index.html)
- [@ngpat/material](https://ngpat-docs-material.web.app/index.html)
- [@ngpat/nx-ng-mat-prototype](https://ngpat-docs-nx-ng-mat-prototype.web.app/index.html)
- [@ngpat/rxjs](https://ngpat-docs-rxjs.web.app/index.html)
- [@ngpat/schematics](https://ngpat-docs-schematics.web.app/index.html)
- [@ngpat/store](https://ngpat-docs-store.web.app/index.html)
- [@ngpat/utils](https://ngpat-docs-utils.web.app/index.html)
npm package: @ngpat/data
Description: Common data end-points and static data for Angular development.
Latest version: 17.0.2

# @ngpat/data

Common data end-points and static data for Angular development.

## Demo Site

See [ng-patterns.web.app](https://ng-patterns.web.app/)

## All Ngpat Libraries

- [@ngpat/calculations](https://ngpat-docs-calculations.web.app/index.html)
- [@ngpat/charts](https://ngpat-docs-charts.web.app/index.html)
- [@ngpat/data](https://ngpat-docs-data.web.app/index.html)
- [@ngpat/date](https://ngpat-docs-date.web.app/index.html)
- [@ngpat/feature-flag](https://ngpat-docs-feature-flag.web.app/index.html)
- [@ngpat/firebase](https://ngpat-docs-firebase.web.app/index.html)
- [@ngpat/fn](https://ngpat-docs-fn.web.app/index.html)
- [@ngpat/material](https://ngpat-docs-material.web.app/index.html)
- [@ngpat/nx-ng-mat-prototype](https://ngpat-docs-nx-ng-mat-prototype.web.app/index.html)
- [@ngpat/rxjs](https://ngpat-docs-rxjs.web.app/index.html)
- [@ngpat/schematics](https://ngpat-docs-schematics.web.app/index.html)
- [@ngpat/store](https://ngpat-docs-store.web.app/index.html)
- [@ngpat/utils](https://ngpat-docs-utils.web.app/index.html)
npm package: @ngpat/date
Description: Date utilities.
Latest version: 17.0.2

# @ngpat/date

Date utilities.

## Demo Site

See [ng-patterns.web.app](https://ng-patterns.web.app/)

## All Ngpat Libraries

- [@ngpat/calculations](https://ngpat-docs-calculations.web.app/index.html)
- [@ngpat/charts](https://ngpat-docs-charts.web.app/index.html)
- [@ngpat/data](https://ngpat-docs-data.web.app/index.html)
- [@ngpat/date](https://ngpat-docs-date.web.app/index.html)
- [@ngpat/feature-flag](https://ngpat-docs-feature-flag.web.app/index.html)
- [@ngpat/firebase](https://ngpat-docs-firebase.web.app/index.html)
- [@ngpat/fn](https://ngpat-docs-fn.web.app/index.html)
- [@ngpat/material](https://ngpat-docs-material.web.app/index.html)
- [@ngpat/nx-ng-mat-prototype](https://ngpat-docs-nx-ng-mat-prototype.web.app/index.html)
- [@ngpat/rxjs](https://ngpat-docs-rxjs.web.app/index.html)
- [@ngpat/schematics](https://ngpat-docs-schematics.web.app/index.html)
- [@ngpat/store](https://ngpat-docs-store.web.app/index.html)
- [@ngpat/utils](https://ngpat-docs-utils.web.app/index.html)
npm package: @ngpat/feature-flag
Description: Firebase feature flag getService.
Latest version: 17.0.2

# @ngpat/feature-flag

Firebase feature flag getService.

## Demo Site

See [ng-patterns.web.app](https://ng-patterns.web.app/)

## All Ngpat Libraries

- [@ngpat/calculations](https://ngpat-docs-calculations.web.app/index.html)
- [@ngpat/charts](https://ngpat-docs-charts.web.app/index.html)
- [@ngpat/data](https://ngpat-docs-data.web.app/index.html)
- [@ngpat/date](https://ngpat-docs-date.web.app/index.html)
- [@ngpat/feature-flag](https://ngpat-docs-feature-flag.web.app/index.html)
- [@ngpat/firebase](https://ngpat-docs-firebase.web.app/index.html)
- [@ngpat/fn](https://ngpat-docs-fn.web.app/index.html)
- [@ngpat/material](https://ngpat-docs-material.web.app/index.html)
- [@ngpat/nx-ng-mat-prototype](https://ngpat-docs-nx-ng-mat-prototype.web.app/index.html)
- [@ngpat/rxjs](https://ngpat-docs-rxjs.web.app/index.html)
- [@ngpat/schematics](https://ngpat-docs-schematics.web.app/index.html)
- [@ngpat/store](https://ngpat-docs-store.web.app/index.html)
- [@ngpat/utils](https://ngpat-docs-utils.web.app/index.html)
npm package: @ngpat/firebase
Description: Common firebase utilities to facilitate connections with firestore and  integrations with NgRX.
Latest version: 17.0.2

# @ngpat/firebase

Common firebase utilities to facilitate connections with firestore and 
integrations with NgRX.


## Demo Site

See [ng-patterns.web.app](https://ng-patterns.web.app/)

## All Ngpat Libraries

- [@ngpat/calculations](https://ngpat-docs-calculations.web.app/index.html)
- [@ngpat/charts](https://ngpat-docs-charts.web.app/index.html)
- [@ngpat/data](https://ngpat-docs-data.web.app/index.html)
- [@ngpat/date](https://ngpat-docs-date.web.app/index.html)
- [@ngpat/feature-flag](https://ngpat-docs-feature-flag.web.app/index.html)
- [@ngpat/firebase](https://ngpat-docs-firebase.web.app/index.html)
- [@ngpat/fn](https://ngpat-docs-fn.web.app/index.html)
- [@ngpat/material](https://ngpat-docs-material.web.app/index.html)
- [@ngpat/nx-ng-mat-prototype](https://ngpat-docs-nx-ng-mat-prototype.web.app/index.html)
- [@ngpat/rxjs](https://ngpat-docs-rxjs.web.app/index.html)
- [@ngpat/schematics](https://ngpat-docs-schematics.web.app/index.html)
- [@ngpat/store](https://ngpat-docs-store.web.app/index.html)
- [@ngpat/utils](https://ngpat-docs-utils.web.app/index.html)
npm package: @ngpat/fn
Description: Common functions including lodash source files migrated to build for Ivy compilation.
Latest version: 17.0.2

# @ngpat/fn

Common functions including lodash source files migrated to build for Ivy compilation.

## Demo Site

See [ng-patterns.web.app](https://ng-patterns.web.app/)

## All Ngpat Libraries

- [@ngpat/calculations](https://ngpat-docs-calculations.web.app/index.html)
- [@ngpat/charts](https://ngpat-docs-charts.web.app/index.html)
- [@ngpat/data](https://ngpat-docs-data.web.app/index.html)
- [@ngpat/date](https://ngpat-docs-date.web.app/index.html)
- [@ngpat/feature-flag](https://ngpat-docs-feature-flag.web.app/index.html)
- [@ngpat/firebase](https://ngpat-docs-firebase.web.app/index.html)
- [@ngpat/fn](https://ngpat-docs-fn.web.app/index.html)
- [@ngpat/material](https://ngpat-docs-material.web.app/index.html)
- [@ngpat/nx-ng-mat-prototype](https://ngpat-docs-nx-ng-mat-prototype.web.app/index.html)
- [@ngpat/rxjs](https://ngpat-docs-rxjs.web.app/index.html)
- [@ngpat/schematics](https://ngpat-docs-schematics.web.app/index.html)
- [@ngpat/store](https://ngpat-docs-store.web.app/index.html)
- [@ngpat/utils](https://ngpat-docs-utils.web.app/index.html)
npm package: @ngpat/material
Description: Components based on the [angular material design library](https://material.angular.io/components/categories) component guide.
Latest version: 17.0.2

# @ngpat/material

Components based on the [angular material design library](https://material.angular.io/components/categories) component guide.


## Demo Site

See [ng-patterns.web.app](https://ng-patterns.web.app/)

## All Ngpat Libraries

- [@ngpat/calculations](https://ngpat-docs-calculations.web.app/index.html)
- [@ngpat/charts](https://ngpat-docs-charts.web.app/index.html)
- [@ngpat/data](https://ngpat-docs-data.web.app/index.html)
- [@ngpat/date](https://ngpat-docs-date.web.app/index.html)
- [@ngpat/feature-flag](https://ngpat-docs-feature-flag.web.app/index.html)
- [@ngpat/firebase](https://ngpat-docs-firebase.web.app/index.html)
- [@ngpat/fn](https://ngpat-docs-fn.web.app/index.html)
- [@ngpat/material](https://ngpat-docs-material.web.app/index.html)
- [@ngpat/nx-ng-mat-prototype](https://ngpat-docs-nx-ng-mat-prototype.web.app/index.html)
- [@ngpat/rxjs](https://ngpat-docs-rxjs.web.app/index.html)
- [@ngpat/schematics](https://ngpat-docs-schematics.web.app/index.html)
- [@ngpat/store](https://ngpat-docs-store.web.app/index.html)
- [@ngpat/utils](https://ngpat-docs-utils.web.app/index.html)
npm package: @ngpat/nx-ng-mat-prototype
Description: A script to generate an nx repository with: - Angular - Angular Material - Firebase - NgRx - TypeScript
Latest version: 17.0.2

# @ngpat/nx-ng-mat-prototype

A script to generate an nx repository with:
- Angular
- Angular Material
- Firebase
- NgRx
- TypeScript

## Run

```
npx @ngpat/nx-ng-mat-prototype
```

Answer questions to generate the repository. Example answers:

#### `What is the initial domain name?` - demo-workspace
#### `What is the initial application name?` - todo
#### `What is the ngrx Entity interface name?` - Todo

The Entity interface name is used to generate the ngrx Entity interface and the ngrx Entity State interface.

[See ngrx Entity](https://ngrx.io/guide/entity)


#### `Add a mobile app ( Capacitor.js )? (y/N)` - y

Create a Capacitor.js app for iOS and Android.

#### `Add a desktop app ( Electron.js )? (y/N)` - y

Create an Electron.js app for Windows, Mac, and Linux.

#### `Configure Firebase? (y/N)` - y

Add Firebase to the project. This works best if a firebase project is already created.

## Demo Site

See [ng-patterns.web.app](https://ng-patterns.web.app/)

## All Ngpat Libraries

- [@ngpat/calculations](https://ngpat-docs-calculations.web.app/index.html)
- [@ngpat/charts](https://ngpat-docs-charts.web.app/index.html)
- [@ngpat/data](https://ngpat-docs-data.web.app/index.html)
- [@ngpat/date](https://ngpat-docs-date.web.app/index.html)
- [@ngpat/feature-flag](https://ngpat-docs-feature-flag.web.app/index.html)
- [@ngpat/firebase](https://ngpat-docs-firebase.web.app/index.html)
- [@ngpat/fn](https://ngpat-docs-fn.web.app/index.html)
- [@ngpat/material](https://ngpat-docs-material.web.app/index.html)
- [@ngpat/nx-ng-mat-prototype](https://ngpat-docs-nx-ng-mat-prototype.web.app/index.html)
- [@ngpat/rxjs](https://ngpat-docs-rxjs.web.app/index.html)
- [@ngpat/schematics](https://ngpat-docs-schematics.web.app/index.html)
- [@ngpat/store](https://ngpat-docs-store.web.app/index.html)
- [@ngpat/utils](https://ngpat-docs-utils.web.app/index.html)
npm package: @ngpat/rxjs
Description: Custom rxjs operators
Latest version: 17.0.2

# @ngpat/rxjs

Custom rxjs operators

## Demo Site

See [ng-patterns.web.app](https://ng-patterns.web.app/)

## All Ngpat Libraries

- [@ngpat/calculations](https://ngpat-docs-calculations.web.app/index.html)
- [@ngpat/charts](https://ngpat-docs-charts.web.app/index.html)
- [@ngpat/data](https://ngpat-docs-data.web.app/index.html)
- [@ngpat/date](https://ngpat-docs-date.web.app/index.html)
- [@ngpat/feature-flag](https://ngpat-docs-feature-flag.web.app/index.html)
- [@ngpat/firebase](https://ngpat-docs-firebase.web.app/index.html)
- [@ngpat/fn](https://ngpat-docs-fn.web.app/index.html)
- [@ngpat/material](https://ngpat-docs-material.web.app/index.html)
- [@ngpat/nx-ng-mat-prototype](https://ngpat-docs-nx-ng-mat-prototype.web.app/index.html)
- [@ngpat/rxjs](https://ngpat-docs-rxjs.web.app/index.html)
- [@ngpat/schematics](https://ngpat-docs-schematics.web.app/index.html)
- [@ngpat/store](https://ngpat-docs-store.web.app/index.html)
- [@ngpat/utils](https://ngpat-docs-utils.web.app/index.html)
npm package: @ngpat/schematics
Description: Custom code generators.
Latest version: 17.0.2

# @ngpat/schematics

Custom code generators.

## @angular-architects/ddd notes


see [libs/ddd/readme.md](libs/ddd/README.md)

## Demo Site

See [ng-patterns.web.app](https://ng-patterns.web.app/)

## All Ngpat Libraries

- [@ngpat/calculations](https://ngpat-docs-calculations.web.app/index.html)
- [@ngpat/charts](https://ngpat-docs-charts.web.app/index.html)
- [@ngpat/data](https://ngpat-docs-data.web.app/index.html)
- [@ngpat/date](https://ngpat-docs-date.web.app/index.html)
- [@ngpat/feature-flag](https://ngpat-docs-feature-flag.web.app/index.html)
- [@ngpat/firebase](https://ngpat-docs-firebase.web.app/index.html)
- [@ngpat/fn](https://ngpat-docs-fn.web.app/index.html)
- [@ngpat/material](https://ngpat-docs-material.web.app/index.html)
- [@ngpat/nx-ng-mat-prototype](https://ngpat-docs-nx-ng-mat-prototype.web.app/index.html)
- [@ngpat/rxjs](https://ngpat-docs-rxjs.web.app/index.html)
- [@ngpat/schematics](https://ngpat-docs-schematics.web.app/index.html)
- [@ngpat/store](https://ngpat-docs-store.web.app/index.html)
- [@ngpat/utils](https://ngpat-docs-utils.web.app/index.html)
npm package: @ngpat/store
Description: Custom stores. Some stores augment NgRx, some are standalone for extreme performance. Common firebase utilities to facilitate connections with firestore and integrations with NgRX.
Latest version: 17.0.2

# @ngpat/store

Custom stores. Some stores augment NgRx, some are standalone for extreme performance. Common firebase utilities to facilitate connections with firestore and
integrations with NgRX.

## Adding Ngpat Firebase Ngrx State

In your app root module, add to Root Store amd Effects classes.

```typescript
import {NgModule} from '@angular/core';
import { StoreModule } from '@ngrx/store';
import {EffectsModule} from '@ngrx/effects';

import {
    NG_PAT_FIREBASE_ROOT_REDUCERS,
    NG_PAT_FIREBASE_ROOT_STATE_INITIALIZERS,
    NG_PAT_FIREBASE_ROOT_EFFECTS
} from '@ngpat/store';

@NgModule({
    imports: [
        StoreModule.forRoot(
            {
                ...NG_PAT_FIREBASE_ROOT_REDUCERS
            },
            {
                initialState: {
                    ...NG_PAT_FIREBASE_ROOT_STATE_INITIALIZERS
                }
            }
        ),
        EffectsModule.forRoot([
            ...NG_PAT_FIREBASE_ROOT_EFFECTS
        ])
    ]
})
export class AppMoule {
}

```

## Writing a getService to connect to firestore
TODO docs

## Using the CustomFireStoreService
TODO docs

## Add Authentication app
TODO docs

## Using Connect / Disconnect Actions

## Demo Site

See [ng-patterns.web.app](https://ng-patterns.web.app/)

## All Ngpat Libraries

- [@ngpat/calculations](https://ngpat-docs-calculations.web.app/index.html)
- [@ngpat/charts](https://ngpat-docs-charts.web.app/index.html)
- [@ngpat/data](https://ngpat-docs-data.web.app/index.html)
- [@ngpat/date](https://ngpat-docs-date.web.app/index.html)
- [@ngpat/feature-flag](https://ngpat-docs-feature-flag.web.app/index.html)
- [@ngpat/firebase](https://ngpat-docs-firebase.web.app/index.html)
- [@ngpat/fn](https://ngpat-docs-fn.web.app/index.html)
- [@ngpat/material](https://ngpat-docs-material.web.app/index.html)
- [@ngpat/nx-ng-mat-prototype](https://ngpat-docs-nx-ng-mat-prototype.web.app/index.html)
- [@ngpat/rxjs](https://ngpat-docs-rxjs.web.app/index.html)
- [@ngpat/schematics](https://ngpat-docs-schematics.web.app/index.html)
- [@ngpat/store](https://ngpat-docs-store.web.app/index.html)
- [@ngpat/utils](https://ngpat-docs-utils.web.app/index.html)
npm package: @ngpat/utils
Description: Custom utility services.
Latest version: 17.0.2

# @ngpat/utils

Custom utility services.

## Demo Site

See [ng-patterns.web.app](https://ng-patterns.web.app/)

## All Ngpat Libraries

- [@ngpat/calculations](https://ngpat-docs-calculations.web.app/index.html)
- [@ngpat/charts](https://ngpat-docs-charts.web.app/index.html)
- [@ngpat/data](https://ngpat-docs-data.web.app/index.html)
- [@ngpat/date](https://ngpat-docs-date.web.app/index.html)
- [@ngpat/feature-flag](https://ngpat-docs-feature-flag.web.app/index.html)
- [@ngpat/firebase](https://ngpat-docs-firebase.web.app/index.html)
- [@ngpat/fn](https://ngpat-docs-fn.web.app/index.html)
- [@ngpat/material](https://ngpat-docs-material.web.app/index.html)
- [@ngpat/nx-ng-mat-prototype](https://ngpat-docs-nx-ng-mat-prototype.web.app/index.html)
- [@ngpat/rxjs](https://ngpat-docs-rxjs.web.app/index.html)
- [@ngpat/schematics](https://ngpat-docs-schematics.web.app/index.html)
- [@ngpat/store](https://ngpat-docs-store.web.app/index.html)
- [@ngpat/utils](https://ngpat-docs-utils.web.app/index.html)
npm package: @ngplatform/ngrx-extension
Description: ngrx and ngrx/signals extensions
Latest version: 1.4.0

# NgrxExtension

## Synchronize with storage `withStorageSync`

An extension feature that saves and loads store states to/from Storage (e.g., localStorage or sessionStorage), and synchronizes state changes automatically if desired.

Instead of saving all states, you can appropriately and persistently manage your application by saving only specific information to storage.

**Example Code**

```ts
export const ShopSignalStore = signalStore(
  withState<AppState>(initialAppState),
  withStorageSync({
    storage: localStorage, // The Storage object to synchronize with (e.g., localStorage, sessionStorage).
    nodes: ['users', {'products': ['items']}], // The keys or nested structure of the store state to be synchronized (e.g. ['user', { settings: ['theme', 'language'] }]).
    prefix: '', // A prefix string attached to the keys when saving to Storage.
    sync: true, //Optional settings (if `sync` is set to true, any state change is automatically written to Storage).
  }),
  withMethods((store) => ({
    // ...
  }))
)
```

## `patchStateWithImmer`

This function leverages Immer's `produce` to let you write mutable-looking
changes in the `updater` callback while actually creating a new, immutable
state object under the hood.

**Example Code**

```ts
import {signalStore} from "@ngrx/signals";

export const UserSignalStore = signalStore(
  withState<{ name: string, age: number }>({name: 'John', age: 30}),
  withMethods((store) => ({
    editUser: (name: string) => {
      // here
      patchStateWithImmer(store, (state) => {
        state.user.name = name;
      });
    },
  }))
)
```