https://github.com/paulorohling/ng-sub

A standalone angular directive to avoid creating multiple subscriptions with AsyncPipe. 💡
https://github.com/paulorohling/ng-sub

angular async directives pipe standalone subscription unsubscribe

Last synced: about 1 month ago
JSON representation

A standalone angular directive to avoid creating multiple subscriptions with AsyncPipe. 💡

• Host: GitHub
• URL: https://github.com/paulorohling/ng-sub
• Owner: pauloRohling
• License: mit
• Created: 2022-08-13T02:45:14.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2024-04-27T17:09:33.000Z (about 1 year ago)
• Last Synced: 2024-11-02T06:11:24.464Z (7 months ago)
• Topics: angular, async, directives, pipe, standalone, subscription, unsubscribe
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@reactive-wind/ng-sub
• Size: 354 KB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# NgSubDirective

[![npm](https://img.shields.io/npm/v/@reactive-wind/ng-sub)](https://www.npmjs.com/package/@reactive-wind/ng-sub)

[![npm](https://img.shields.io/npm/dw/@reactive-wind/ng-sub)](https://www.npmjs.com/package/@reactive-wind/ng-sub)

This is a **Standalone Angular Directive** to avoid creating multiple subscriptions with AsyncPipe by centralizing the subscription and providing it through template context.

## Prerequisites

- Angular 17.3

## Installation

```bash

npm install --save-dev @reactive-wind/ng-sub

```

## Usage

To use the `ngSub` directive, follow these steps:

1. Import the `NgSubDirective` into your Angular component:

   ```typescript

   import { Component } from "@angular/core";

   import { NgSubDirective } from "@reactive-wind/ng-sub";

   import { Observable } from "rxjs";

   

   @Component({

     standalone: true,

     selector: "app-your-component",

     templateUrl: "./your-component.component.html",

     styleUrls: ["./your-component.component.scss"],

     imports: [NgSubDirective] // <-- Import the directive

   })

   export class YourComponent {

     message$: Observable; // <-- Define your observable

   }

   ```

2. Use the `ngSub` directive in your template:

   ```html

   

     

     

     

   

   ```