open-index/open-npm huggingface dataset:
npm package: @ngflow/ng-architect
Description: Angular schematics to generate files and maintain clean architecture
Author: João Fernandes
Latest version: 1.2.9

# ![ng-architect](https://img.shields.io/badge/ng--architect-angular-blue)

[![npm version](https://img.shields.io/npm/v/@ngflow/ng-architect?color=blue)](https://www.npmjs.com/package/@ngflow/ng-architect) [![License](https://img.shields.io/npm/l/@ngflow/ng-architect)](https://opensource.org/licenses/MIT)

`ng-architect` is an **Angular schematic** that automates the creation of **complete features** while keeping a clean and consistent **project structure and architecture**.  

It generates **pages, services, models, store, and routes**, making your development faster and more organized.

---

## 📦 Installation

```bash
# Install as a dev dependency
npm install @ngflow/ng-architect --save-dev
```

## Usage
```bash 
ng g @ngflow/ng-architect:ng-architect --name=<feature-name>


example: 
ng g @ngflow/ng-architect:ng-architect --name=user-profile
```

```bash
This will create the following structure:

src/app/features/user-profile/
 ├─ data/
 │   ├─ user-profile.service.ts
 │   └─ user-profile.store.ts
 ├─ models/
 │   └─ user-profile.model.ts
 └─ pages/
     ├─ user-profile.page.ts
     ├─ user-profile.page.html
     └─ user-profile.page.scss


If app.routes.ts exists, the feature route will be added automatically.
```
npm package: @ngfrx/changesetfetcher
Description: Plugin to fetch changeset details from salesforce sandbox
Author: Ngfrx @ngfrx
Latest version: 0.8.4

# Changeset Fetcher

A sfdx plugin to fetch changeset details from salesforce sandbox

## Getting Started

These installation instructions will get you started using the plugin on your local machine.

### Prerequisites

sfdx should be installed on your local machine. see following link for sfdx installation.
```
https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_install_cli.htm
```

### Installing

Plugin can be installed in following ways: 
* plugins install
* cloning and plugins link
* cloning and run command

#### Plugins install

```
sfdx plugins:install @ngfrx/changesetfetcher
```

#### cloning and plugins link
```
git clone https://github.com/ngfrx/changeset-fetcher.git
npm install
sfdx plugins:link changsetfetcher
```

#### cloning and run command
```
git clone https://github.com/ngfrx/changeset-fetcher.git
npm install
./bin/run ngfrx:changeset:list -u <username> --verbose
```

### Examples
```
sfdx ngfrx:changeset:list --username mysandboxusername@example.com
NAME                                        STATUS
──────────────────────────────────────────  ──────
JIRA-1234_HELLO_WORLD_SPRINT3               Open
```
```
sfdx ngfrx:changeset:list --username mysandboxusername@example.com --verbose
ID               NAME                                        DESCRIPTION  STATUS  MODIFIED BY     MODIFIED DATE
───────────────  ──────────────────────────────────────────  ───────────  ──────  ──────────────  ───────────────
0A20E0000009BJA  JIRA-1234_HELLO_WORLD_SPRINT3                            Open    Olivia White    22-1-2020 17:02
```

```
sfdx ngfrx:changeset:list --username mysandboxusername@example.com --list
{
  "status": 0,
  "result": {
    "recordCount": 1,
    "records": [
      {
        "id": "0A20E0000009BJA",
        "name": "JIRA-1234_HELLO_WORLD_SPRINT3",
        "description": "",
        "status": "Open",
        "modifiedBy": "Olivia White",
        "modifiedDate": "22-1-2020 17:02"
      }
    ]
  }
}
```






## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
npm package: @nggondolas/global-tokens
Description: Common utilities for consuming Web APIs from Angular
Author: Jaime Oliveira
Latest version: 1.0.0

# GlobalTokens

## Usage

```typescript
import {Component, inject, InjectionToken} from '@angular/core';
import {USER_AGENT} from '@nggondolas/global-tokens';

export const GET_BROWSER = new InjectionToken<string>('User Agent', {
    providedIn: 'root',
    factory: () => inject(USER_AGENT).toLowerCase()
});

@Component({})
export class AppComponent {
    constructor(@Inject(GET_BROWSER) private readonly userAgent: string) {}

    get foo(): string {
        return this.userAgent;
    }
}

```
npm package: @ngha/nested-value
Description: nestedValue the value at `path` of `object`
Author: han
Latest version: 0.2.5

# nested-value

This library get object value by path

## Usage

Import `NestedValueModule` to your module

```ts
import { NgModule } from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { AppComponent } from './app';
 
import { NestedValueModule } from '@ngha/nested-value';
@NgModule({
  imports: [NestedValueModule],
})
export class AppModule {}
```


### nested-value

Returns value of an object value 

**Usage:** `object | nestedValue: 'path' :  'defaultValue'`

```angular2html
  <p>{{{ 'a': 'aa' } | nestedValue:'a'}}</p>
  <!-- Output: "aa" -->
  <p>{{{ c: [{ d: '123', e: 'abc' }, { d: '456', e: 'def' }] } | nestedValue:'c[0].d'}}</p>
  <!-- Output: "123" -->
  <p>{{{ c: [{ d: '123', e: 'abc' }, { d: '456', e: 'def' }] } | nestedValue:['c', [1], 'e']}}</p>
  <!-- Output: "def" -->
  <p>{{{ c: [{ d: '123', e: 'abc' }, { d: '456', e: 'def' }] } | nestedValue:['c', [3], 'f']: 'default'}}</p>
  <!-- Output: "default" -->
  <p>{{{ c: [{ d: '123', e: 'abc' }, { d: '456', e: 'def' }] } | nestedValue:['c', [3], 'f']}}</p>
  <!-- Output: undefine -->
```

```typescript
 import {NestedValueService} from '@ngha/nested-value'
 
 @Component({
   providers: [TransformObjectService],
 })
 export class AppComponent
 {
   constructor(private service: TransformObjectService)
   {
     const obj = {
      aa: [{ b: { c: 0 }, 1: 0 }],
      dd: { ee: { ff: 2 } },
      gg: { h: 2 },
      'gg.h': 1,
      'kk.ll': { 'mm.n': [3, 4, { 'oo.p': 5 }, { 'oo': { p: 6 } }] },
      tt: null
     };

      const result1 = this.service.nestedValue(obj , 'aa[0].b.c' ) === obj['aa'][0]['b']['c'] 
      // Output: result1 = true
      const result2 = this.service.nestedValue(obj , 'aa[0][1]') === obj['aa'][0][1]
      // Output: result2 = true
      const result3 = this.service.nestedValue(obj , ['kk.ll', 'mm.n', 2, 'oo.p']) === obj['kk.ll']['mm.n'][2]['oo.p']
      // Output: result3 = true
      const result4 = this.service.nestedValue(obj , ['kk.ll', 'mm.n', 3, 'oo', 'p']) === 6
      // Output: result4 = true
      const result5 = this.service.nestedValue(undefine , ['kk'] , 1) === 1
      // Output: result5 = true
      const result6 = this.service.nestedValue(undefine , 'kk') === undefine
      // Output: result6 = true

   }
 
 }

```
npm package: @nghacks/banner-carousel
Description: Image carousel for web page banner.
Author: Abdun Nahid
Latest version: 1.0.2

# Image carousel

Image carousel for web page banner.

[Live Preview](https://ng-hack.web.app/banner-carousel)

## How to use

> Install package

```bash
npm install @nghacks/banner-carousel
```

> Import `BannerCarouselModule` to your consumer module.

```typescript
import { NgModule } from '@angular/core';
...
...
import { BannerCarouselModule } from '@nghacks/banner-carousel';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    BannerCarouselModule
  ]
})
export class ConsumerModule { }
```

> Use Component in template

```html
<banner-carousel
  (imageClick)="onimageClick($event)"
  (imageChange)="onimageChange($event)"
  [height]="280"
  [autoChangeInterval]="5000"
  [data]="data">
</banner-carousel>

```

## Inputs

```typescript

  /**
   * @description Data Source for the carousel
   * @field Required
   */
  
  @Input() data: IBannerCarouselImage[];

  /**
   * @description Height of the carousel
   * @type number that represents pixel
   * @default 280 in pixel
   */
  @Input() height = 280;

  /**
   * @description Enable/Disable auto change behavior of the carousel
   * @default true
   */
  @Input() autoChange = true;

  /**
   * @description Auto change interval of carousel
   * @type number that represents in ms(milisecond)
   * @default 5000 in ms
   */
  @Input() autoChangeInterval = 5000;

```

## Outputs

```typescript

  /**
   * @description Emits when carousel image is changed
   * @returns {IBannerCarouselImage}
   */
  @Output() imageChange = new EventEmitter<IBannerCarouselImage>();

  /**
   * @description Emits when carousel image is clicked
   * @returns {IBannerCarouselImage}
   */
  @Output() imageClick = new EventEmitter<IBannerCarouselImage>();

```

## Types

```typescript

interface IBannerCarouselImage {
  src: string;
  alt?: string;
  data?: any;
  id?: string | number;
}

```
npm package: @nghacks/dynamic-browser-title
Description: Updates browser title dynamically & automatically on route change
Author: Abdun Nahid
Latest version: 0.1.0

# DynamicBrowserTitle

Updates browser title dynamically & automatically on route change.

[Live Preview](https://ng-hack.web.app/dynamic-browser-title)

## How to use

> Install package

```bash
npm install @nghacks/dynamic-browser-title
```

> Import `DynamicBrowserTitleModule` to your bootstrap module like `AppModule` and pass `DynamicBrowserTitleConfig`.

```typescript
import { NgModule } from '@angular/core';
...
...
import { DynamicBrowserTitleModule } from '@nghacks/ngmat-table-query-reflector';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    DynamicBrowserTitleModule.forRoot({
      selector: '.page header h1'
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

## DynamicBrowserTitleConfig API

```typescript
export class DynamicBrowserTitleConfig {
  /**
   * @field Requered
   * @description Determines which element select to retrieve browser title
   */
  selector: string;

  /**
   * @field Optional
   * @default innerText found in <title></title> tag on index.html
   * @description Text that will be added before the text found by the selector
   */
  prefix?: string;

  /**
   * @field Optional
   * @description Text that will be added after the text found by the selector
   */
  sufix?: string;

}
```
## Update DynamicBrowserTitleConfig

You can also change the configurations afterwards from a module or component.

> some-feature.module.ts

```typescript
import { NgModule } from '@angular/core';
...
...
import { DynamicBrowserTitleModule } from '@nghacks/ngmat-table-query-reflector';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    DynamicBrowserTitleModule.forRoot({
      selector: '.page header h1'
    })
  ]
})
export class SomeFeatureModule { 
  construnctor(private _dynamicBrowserTitleService: DynamicBrowserTitleService) {
    this._dynamicBrowserTitleService.config = {
      selector: '#example-selectoor',
      prefix: '',
      sufix: ' | Some Feature'
    }
  }
}
```
npm package: @nghacks/image-viewer
Description: Shows full size image in a overlay maintaining the aspect ratio
Author: Abdun Nahid
Latest version: 1.0.0

# Image Viewer

Shows full size image in a overlay maintaining the aspect ratio.

[Live Preview](https://ng-hack.web.app/image-viewer)

## How to use

> Install package

```bash
npm install @nghacks/image-viewer
```

> Import `ImageViewerModule` to your consumer module.

```typescript
import { NgModule } from '@angular/core';
...
...
import { ImageViewerModule } from '@nghacks/image-viewer';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    ImageViewerModule
  ]
})
export class ConsumerModule { }
```

> Add directive to html template

```html
<!-- Basic -->
<img imageViewer src="https://picsum.photos/300/300" alt="dummy image">

<!-- Disabled -->
<img imageViewer [disabled]="true" src="https://picsum.photos/300/300" alt="dummy image">

<!-- Custom src -->
<img imageViewer="https://picsum.photos/3000/3000" src="https://picsum.photos/100/100" alt="dummy image">

<!-- Not img element -->
<button imageViewer="https://picsum.photos/300/300" alt="dummy image">View</button>

```

## Inputs

```typescript

  /**
   * @description Image source URL
   */
  @Input() src: string;

  /**
   * @description Alnernate text for image
   */
  @Input() alt: string;

  /**
   * @description Disables image viewer
   */
  @Input() disabled: boolean;

```
npm package: @nghacks/info-dialog
Description: Shows detail information on a dialog/modal.
Author: Abdun Nahid
Latest version: 0.1.1

# Info Dialog

Shows detail information on a dialog/modal.

[Live Preview](https://ng-hack.web.app/info-dialog)

## How to use

> Install package

```bash
npm install @nghacks/info-dialog
```

> Import `InfoDialogModule` to your consumer module like `ConsumerModule`

```typescript
import { NgModule } from '@angular/core';
...
...
import { InfoDialogModule } from '@nghacks/info-dialog';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    InfoDialogModule
  ]
})
export class ConsumerModule { }
```

> Use component on html template

```html

<!-- Place it anywhere -->
<ng-container *ngTemplateOutlet="userStatusInfo"></ng-container>

<!-- Get as template ref -->
<ng-template #userStatusInfo>
  <info-dialog>
    <mat-icon info-dialog-icon color="accent" matTooltip="Click to see details">info</mat-icon>
    <info-title>Status Info</info-title>

    <info-section>
      <info-section-title>User Status</info-section-title>
      <info-item>
        <info-label>
          <span class="color-active">Active</span>
        </info-label>
        <info-content>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit sequi atque dolores, iure ex nemo?
        </info-content>
      </info-item>

      <info-item>
        <info-label>
          <span class="color-inactive">Inactive</span>
        </info-label>
        <info-content>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio blanditiis doloribus sequi.
        </info-content>
      </info-item>

      <info-item>
        <info-label>
          <span class="color-warn">Pending</span>
        </info-label>
        <info-content>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum error iure earum facere quidem assumenda
          fugit odit aperiam quisquam hic.
        </info-content>
      </info-item>
    </info-section>

    <info-section>
      <info-section-title>Subscription Status</info-section-title>

      <info-item>
        <info-label>
          <span class="color-active">Active</span>
        </info-label>
        <info-content>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Numquam, repellat.
        </info-content>
      </info-item>
      <info-item>

        <info-label>
          <span class="color-inactive">Inactive</span>
        </info-label>
        <info-content>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Beatae atque eaque tempore laudantium!
        </info-content>
      </info-item>

    </info-section>

  </info-dialog>
</ng-template>
```