https://github.com/nickwinger/ngrxcrosstabcommunication

Simple Browser Cross Tab Communcation for angular2+ using rxjs
https://github.com/nickwinger/ngrxcrosstabcommunication

angular browser communication crosstab module rxjs

Last synced: 26 days ago
JSON representation

Simple Browser Cross Tab Communcation for angular2+ using rxjs

• Host: GitHub
• URL: https://github.com/nickwinger/ngrxcrosstabcommunication
• Owner: nickwinger
• License: mit
• Created: 2018-10-30T08:31:13.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2018-10-30T11:41:01.000Z (about 6 years ago)
• Last Synced: 2024-12-08T02:32:59.428Z (about 1 month ago)
• Topics: angular, browser, communication, crosstab, module, rxjs
• Language: JavaScript
• Size: 107 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ngrxcrosstabcommunication

Just a simple cross tab communication service für angular2+ using localstorage and rxjs

## Installation

To install this library, run:

```bash

$ npm install ngrxcrosstabcommunication --save

```

## Including in angular

inside your Angular-Module:

```typescript

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import CrossTabCommunication library

import { NgRxCrossTabCommunicationModule } from 'ngrxcrosstabcommunication';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    

    NgRxCrossTabCommunicationModule.forRoot()

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

```

Once the library is imported, you can use the service like this:

```typescript

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

import { CrossTabService } from 'ngrxcrosstabcommunication';

@Component() {}

export class MyComponent {

    constructor(crossTabService: CrossTabService) {

        crossTabService.messages.subscribe(msg => {

           console.log('Received message: ' + msg.message); 

        });

        

        crossTabService.sendMessage({ message: 'Test message', data: {foo: 'bar'}});

    }

}

```

## Usage / API

The message objects contains simply a message string and optional data of any type:

```typescript

interface CrossTabMessage {

    message: string;

    data?: any;

}

```

Import the CrossTabService and subscribe to messages

```typescript

    crossTabService.messages.subscribe((msg: CrossTabMessage) => {

        

    });    

```

Import the CrossTabService and send messages

```typescript

    const messageSentToOtherTabs = {

        message: 'Test', data: { foo: 'bar'}

    };

    crossTabService.sendMessage(messageSentToOtherTabs);

        

    const messageSentToAllTabs = { // including the current tab

        message: 'Test', data: 'bar'}

    };

    crossTabService.sendMessage(messageSentToAllTabs, true);

```

## Feedback / Issues / Wishes

If you need a feature that is not yet implemented, please just tell me.

## License

MIT © [Nick Winger](mailto:[email protected])