{"id":13481830,"url":"https://github.com/pubnub/pubnub-angular2","last_synced_at":"2025-10-14T10:48:45.250Z","repository":{"id":12729722,"uuid":"69265760","full_name":"pubnub/pubnub-angular2","owner":"pubnub","description":null,"archived":false,"fork":false,"pushed_at":"2023-07-05T10:41:59.000Z","size":4225,"stargazers_count":32,"open_issues_count":29,"forks_count":13,"subscribers_count":22,"default_branch":"master","last_synced_at":"2024-04-26T23:01:04.113Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pubnub.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-09-26T15:45:03.000Z","updated_at":"2023-07-05T10:42:03.000Z","dependencies_parsed_at":"2024-01-14T09:00:36.488Z","dependency_job_id":null,"html_url":"https://github.com/pubnub/pubnub-angular2","commit_stats":{"total_commits":133,"total_committers":7,"mean_commits":19.0,"dds":0.3007518796992481,"last_synced_commit":"a4bd1a606dd12a17972c3fb9033bb2f3dd42656f"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pubnub%2Fpubnub-angular2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pubnub%2Fpubnub-angular2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pubnub%2Fpubnub-angular2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pubnub%2Fpubnub-angular2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pubnub","download_url":"https://codeload.github.com/pubnub/pubnub-angular2/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222251953,"owners_count":16955931,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T17:00:56.375Z","updated_at":"2025-10-14T10:48:40.202Z","avatar_url":"https://github.com/pubnub.png","language":"JavaScript","readme":"# pubnub-angular2\n\n![SDK Logo](http://cl.ly/241N0q2P2q22/Screen%20Shot%202016-02-03%20at%205.32.32%20PM.png)\n\n[![Build Status](https://travis-ci.org/pubnub/pubnub-angular2.svg?branch=master)](https://travis-ci.org/pubnub/pubnub-angular2)\n[![Codecov](https://img.shields.io/codecov/c/github/pubnub/pubnub-angular2.svg)](https://codecov.io/github/pubnub/pubnub-angular2?branch=master)\n[![npm](https://img.shields.io/npm/v/pubnub-angular2.svg)](https://www.npmjs.com/package/pubnub-angular2)\n![Bower](https://img.shields.io/bower/v/pubnub-angular2.svg)\n\nWelcome! We're here to get you started quickly with your\nintegration between PubNub and Angular v2 and Angular v4. PubNub makes it\neasy to integrate real-time bidirectional communication\ninto your app.\n\n**Pubnub Angular2** service is a wrapper for **PubNub JavaScript SDK** [version 4](https://www.pubnub.com/docs/javascript/pubnub-javascript-sdk-v4)\nthat adds a few of extra features to simplify Angular integrations:\n\nYou can still use the native PubNub JavaScript SDK if you feel this will be\nmore suitable for your situation.\n\nFor more information, visit our [docs](https://www.pubnub.com/docs/sdks/angular2) page.\n\n## Communication\n- If you **need help** or have a **general question**, contact \u003csupport@pubnub.com\u003e\n- If you **want to contribute**, please open a pull request against the `develop` branch.\n\n## How to use PubNubAngular for Angular4\n\nNPM\n```shell\nnpm install pubnub-angular2 --save\n```\n\nAdd PubNubAngular to list of providers inside the NgModule.\n\n***TypeScript***\n```typescript\nimport { PubNubAngular } from 'pubnub-angular2';\nimport { NgModule }      from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\n\n@NgModule({\n  imports:      [ BrowserModule ],\n  declarations: [ ... ],\n  bootstrap:    [ ... ],\n  providers: [ PubNubAngular ]\n})\nexport class AppModule { }\n```\n\nNow PubNubAngular is a service available for all components defined in the NgModule.\n\n***TypeScript***\n```typescript\nimport { PubNubAngular } from 'pubnub-angular2';\nimport { Component, Injectable, Class } from '@angular/core';\n\n@Component({\n  selector: 'my-app',\n  template: '\u003cdiv\u003e...\u003c/div\u003e',\n})\n\nexport class AppComponent  {\n  constructor(pubnub: PubNubAngular){\n\n    pubnub.init({ publishKey: 'your pub key', subscribeKey: 'your sub key' });\n  }\n}\n```\n\n## How to use PubNubAngular for Angular2\n\nNPM\n```shell\nnpm install pubnub pubnub-angular2 --save\n```\n\nBower\n```shell\nbower install pubnub pubnub-angular2 --save\n```\n\nCDN\n```html\n\u003cscript src=\"http(s)://cdn.pubnub.com/sdk/pubnub-angular2/pubnub-angular2.(version).js\"\u003e\u003c/script\u003e\n\u003cscript src=\"http(s)://cdn.pubnub.com/sdk/pubnub-angular2/pubnub-angular2.(version).min.js\"\u003e\u003c/script\u003e\n```\n\n### For environments Javascript follow these steps\n\n1. Include global dependencies for Angular2\n\n```html\n\u003cscript src=\"node_modules/core-js/client/shim.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"node_modules/zone.js/dist/zone.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"node_modules/reflect-metadata/Reflect.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"node_modules/rxjs/bundles/Rx.js\"\u003e\u003c/script\u003e\n```\n\n2. Include Angular2\n\n```html\n\u003cscript src=\"node_modules/@angular/core/bundles/core.umd.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"node_modules/@angular/common/bundles/common.umd.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"node_modules/@angular/compiler/bundles/compiler.umd.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"node_modules/@angular/platform-browser/bundles/platform-browser.umd.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"node_modules/@angular/forms/bundles/forms.umd.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js\"\u003e\u003c/script\u003e\n```\n\n3. Include the lastest version of PubNub's Javascript SDK\n\n```html\n\u003cscript src=\"node_modules/pubnub/dist/web/pubnub-angular2.js\"\u003e\u003c/script\u003e\n```\n\n4. Include PubNub's Angular2 SDK\n\n```html\n\u003cscript src=\"node_modules/pubnub-angular2/dist/pubnub-angular2.js\"\u003e\u003c/script\u003e\n```\n\nAdd PubNubAngular to list of providers inside the NgModule.\n\n***Javascript***\n```javascript\n(function (app) {\n\n    app.your_module = ng.core.NgModule({\n        imports: [...],\n        declarations: [...],\n        providers: [PubNubAngular],\n        bootstrap: [...]\n    }).Class({\n        constructor: function(){}\n    });\n\n    document.addEventListener('DOMContentLoaded', function(){\n        ng.platformBrowserDynamic.platformBrowserDynamic().bootstrapModule(app.your_module);\n    });\n\n})(window.app || (window.app = {}));\n```\n\nNow PubNubAngular is a service available for all components defined in the NgModule.\n\n***Javascript***\n```javascript\n(function (app) {\n\n    app.main_component = ng.core.Component({\n\n        selector: '...',\n        templateUrl: '...'\n\n    }).Class({\n\n        constructor: [PubNubAngular, function(pubnub){\n\n            pubnub.init({\n                publishKey: 'your pub key',\n                subscribeKey: 'your sub key'\n            });\n\n            ...\n        }]\n    });\n\n})(window.app || (window.app = {}));\n```\n\n### For environments Typescript follow these steps\n\n1. Include global dependencies for Angular2\n\n```html\n\u003cscript src=\"node_modules/core-js/client/shim.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"node_modules/zone.js/dist/zone.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"node_modules/reflect-metadata/Reflect.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"node_modules/rxjs/bundles/Rx.js\"\u003e\u003c/script\u003e\n```  \n\n2. Include the lastest version of PubNub's Javascript SDK\n\n```html\n\u003cscript src=\"node_modules/pubnub/dist/web/pubnub-angular2.js\"\u003e\u003c/script\u003e\n```\n\n3. Include and load libraries from systemjs\n\n```\n\u003cscript src=\"node_modules/systemjs/dist/system.src.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"systemjs.config.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  System.import('app').catch(function(err){ console.error(err); });\n\u003c/script\u003e\n```\n\n4. Your systemjs.config.js will have to include next libraries with the last one key library. Inside the map attribute.\n\n```javascript\nmap: {\n  'rxjs': 'npm:rxjs',\n  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',\n  '@angular/common': 'npm:@angular/common/bundles/common.umd.js',\n  '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',\n  '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',\n  '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',\n  '@angular/http': 'npm:@angular/http/bundles/http.umd.js',\n  '@angular/router': 'npm:@angular/router/bundles/router.umd.js',\n  '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',\n  'pubnub-angular2': 'npm:pubnub-angular2/dist/pubnub-angular2.js'\n}\n```\n\nAdd PubNubAngular to list of providers inside the NgModule.\n\n***TypeScript***\n```typescript\nimport { NgModule }      from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { PubNubAngular } from 'pubnub-angular2';\n\n@NgModule({\n  imports:      [ BrowserModule ],\n  declarations: [ ... ],\n  bootstrap:    [ ... ],\n  providers: [ PubNubAngular ]\n})\nexport class AppModule { }\n```\n\nNow PubNubAngular is a service available for all components defined in the NgModule.\n\n***TypeScript***\n```typescript\nimport {Component, Injectable, Class} from '@angular/core';\n\n@Component({\n  selector: 'my-app',\n  template: '\u003cdiv\u003e...\u003c/div\u003e',\n})\n\nexport class AppComponent  {\n  constructor(pubnub: PubNubAngular){\n\n    pubnub.init({\n      publishKey: 'your pub key',\n      subscribeKey: 'your sub key'\n    });\n  }\n}\n```\n\n## Differences in usage with native JavaScript SDK\n\nIn **Pubnub Angular2 SDK** instances are hidden inside service and are accessible via instance getter.\n\n### Creating a default instance PubNub JS V4\n\n***Javascript***\n```javascript\nvar defaultInstance = new PubNub({\n  publishKey: 'your pub key',\n  subscribeKey: 'your sub key'\n});\n```\n\n***TypeScript***\n```typescript\ndeclare var PubNub: any;\n\nvar defaultInstance = new PubNub({\n  publishKey: 'your pub key',\n  subscribeKey: 'your sub key'\n});\n```\n\n### Creating a default instance PubNub Angular 2 SDK\n\n```javascript\nvar pubnub = new PubNubAngular();\n\npubnub.init({\n  publishKey: 'your pub key',\n  subscribeKey: 'your sub key'\n});\n```\n\n### Creating an other instance\n\nIn most use cases, usage of the default PubNub instance will be sufficient, but if multiple instances with\ndifferent credentials are needed, the ```pubnub.getInstance(instanceName)``` getter needs to be utilized.\n\n```javascript\nvar pubnub = new PubNubAngular();\n\npubnub.getInstance(\"another\").init({\n  publishKey: 'your pub key',\n  subscribeKey: 'your sub key'\n});\n```\n\n## Accessing methods\n\nAll methods of the Native Javascript SDKs are wrapped within the **Pubnub Angular2 SDK**.\n\n- Methods of default instance are mapped directly to PubNub service like ```pubnub.publish({...})```.\n- Methods of the other instances are available via the instance getter like ```pubnub.getInstance(instanceName).publish()```.\n\nTo learn about PubNub JavaScript features and methods available refer to the API Reference of the Javascript SDK that you are using:\n\n* [JavaScript V4 API Reference](https://www.pubnub.com/docs/javascript/api-reference-sdk-v4)\n\n**Examples:**\n\n```javascript\npubnub.publish({ channel: 'myChannel', message: 'Hello!' }, (response) =\u003e {\n  console.log(response);\n});\n```\n\nWith an other instance\n\n```javascript\npubnub.getInstance(\"another\").publish({ channel: 'myChannel', message: 'Hello!' }, (response) =\u003e {\n  console.log(response);\n});\n```\n\nThat's it - you're ready to start using the Angular2 PubNub SDK!\n\n## Events\n\nAnother key feature of this SDK is the ability to trigger method events in addition to passed in callbacks. By default events will not be triggered.\n\nTo enable all possible events for certain method, add ```triggerEvents: true``` option to the method arguments.\n\n```javascript\npubnub.subscribe({ channels: ['myChannel1'], triggerEvents: true, withPresence: true });\n```\n\nTo enable specific triggerEvents, add ```triggerEvents: ['message', 'presence', 'status']```option to the method arguments.\n\n```javascript\npubnub.subscribe({ channels: ['myChannel1'], triggerEvents: ['message', 'status'] });\n```\n\nTo get that `presence` event works, do not forget to add ```withPresence: true```\n\n### Triggering and listening to events for the subscribe method\n\nFor listening trigger events is available `broadcastOn` this allows to intercept events using a callback per channel\nor callback per a set of channels.\n\nWith Javascript V4, you can trigger 3 different events (message, presence and status)\n\n```javascript\npubnub.subscribe({\n  channels  : ['myChannel1', 'myChannel2', 'myChannel3'],\n  channelGroups: ['myGroup1', 'myGroup2'],\n  withPresence: true,\n  triggerEvents: ['message', 'presence', 'status']\n});\n```\n\nYou can also enable all possible events using `triggerEvents: true`\n\n**Listening to a message event of a specific channel or channel group:**\n\n```javascript\npubnub.getMessage('myChannel', (msg) =\u003e {\n  console.log(msg);\n});\n\npubnub.getMessage('myGroup1', (msg) =\u003e {\n  console.log(msg);\n});\n```\n\n**Listening to a message event of a specific set of channels or channel groups:**\n\n```javascript\npubnub.getMessage(['myChannel1', 'myChannel2', 'myGroup1'], (msg) =\u003e {\n  console.log(msg.message);\n  console.log(msg.channel);\n});\n```\n\n**Listening to a presence event of a specific channel or channel group:**\n\n```javascript\npubnub.getPresence('myChannel', (pse) =\u003e {\n  console.log(pse);\n});\n\npubnub.getPresence('myGroup1', (pse) =\u003e {\n  console.log(pse);\n});\n```\n\n**Listening to a presence event of a specific set of channels or channel groups:**\n\n```javascript\npubnub.getPresence(['myChannel1', 'myChannel2', 'myGroup1'], (pse) =\u003e {\n  console.log(pse);\n  console.log(pse.subscribedChannel);\n});\n```\n\n**Listening to the global status for a channel or channel group:**\n\n```javascript\npubnub.getStatus('myChannel', (st) =\u003e {\n  console.log(st);\n});\n\npubnub.getStatus('myGroup1', (st) =\u003e {\n  console.log(st);\n});\n```\n\n**Listening to the global status for a specific set of channels or channel group:**\n\n```javascript\npubnub.getStatus(['myChannel1', 'myChannel2', 'myGroup1'], (st) =\u003e {\n  console.log(st);\n});\n```\n\n**Catching trigger errors**\n\n```javascript\npubnub.getError((err) =\u003e {\n  console.log(err);\n});\n```\n**Listening to other instances:**\n\n```javascript\npubnub.getInstance('another').getMessage('myChannel', (msg) =\u003e {\n  console.log(msg);\n});\n```\n\n**Unsubscribe a channel:**\n\n```javascript\npubnub.unsubscribe('myChannel1');\n```\n\n### How to get the stack of messages or inject it directly in the HTML\n\nThe ```getMessage``` method is more than a mechanism for registering a channel, a set of channels or even a channel group\nto a callback method that acts like a receptor to receive message by message when it is activated the triggerEvents option\nat the moment of subscribing channels.\n\nThe stack is going to hold all messages since when you register your channel with ```getMessage``` method.\n\n**Getting stack of messages for each register of channel or channel group:**\n\n```javascript\nvar myStack1 = pubnub.getMessage('myChannel1', (msg) =\u003e {\n console.log(msg);\n});\n```\n\n```javascript\nvar myStack1 = pubnub.getMessage('myGroup1', (msg) =\u003e {\n  console.log(msg);\n});\n```\n\n**Getting stack of messages without having a callback associated to the channel or channel group:**\n\n```javascript\nvar myStack1 = pubnub.getMessage('myChannel1');\n```\n\n```javascript\nvar myStack1 = pubnub.getMessage('myGroup1');\n```\n\nWhen you are using getMessage this is going to keep the latest 100 messages received by default. \nBut you can change this value when you attach the channel for first time with getMessage.\n\n```javascript\nvar myStack1 = pubnub.getMessage('myChannel1', (msg) =\u003e {\n console.log(msg);\n}, 20);\n```\n\n```javascript\nvar myStack1 = pubnub.getMessage('myChannel1', 30);\n```\n\nYou can also get the stack of messages with the code above in whatever moment after registering the channel. Remember\nthat you can use this code to associate this to a field in your ngComponent and the stack of messages is going to be\navailable inside your html.\n\n**Cleaning and releasing the stack of messages:**\n\nYou can execute clean to remove all message cached by the instance in run time without affecting the capture of new\nincoming messages for the trigger events.\n\n```javascript\npubnub.clean('myChannel1');\n```\n\n```javascript\npubnub.clean('myGroup1');\n```\n\n```javascript\npubnub.clean(['myChannel1', 'myChannel2']);\n```\n\nYou can execute release if you want to remove all message cached and stop of capturing new incoming messages for the\ntrigger events.\n\n\n```javascript\npubnub.release('myChannel1');\n```\n\n```javascript\npubnub.release('myGroup1');\n```\n\n```javascript\npubnub.release(['myChannel1', 'myChannel2']);\n```\n\n**Getting stack of messages directly in the HTML:**\n\nInside the HTML that you have defined like a template in your ngComponent, you can inject the ```getMessage``` method\nwith name of your channel or channel group subscribed.\n\n```html\n\u003cul *ngFor=\"let item of pubnub.getMessage('myChannel1')\"\u003e\n    \u003cli\u003e{{ item.message }}\u003c/li\u003e\n\u003c/ul\u003e\n```\n### Channels with history\n\nYou can retrieve published messages from archival storage for this requires that [Storage and Playback](http://www.pubnub.com/knowledge-base/discussion/644/how-do-i-enable-add-on-features-for-my-keys) add-on is enabled\nfor your keys. In order to get more information about this feature - see [History](https://www.pubnub.com/docs/javascript/api-reference-sdk-v4#history).\n\n```javascript\npubnub.history({ channel: 'myChannel1' }).then((response) =\u003e {\n  console.log(response);\n});\n```\n\n**Retriving the history from ```getMessage``` method:**\n\nAt the moment that you are subscribing a channel you can pass the optional parameter ```autoload``` this value has to\ncontain a value from 1 to 100 in order to retrieve the last messages published in the channel. When the ```getMessage```\nis called this going to retrieve the history.\n\n```javascript\npubnub.subscribe({ channels: ['myChannel1'], triggerEvents: true, withPresence: true, autoload: 100 });\n\nvar myStack1 = pubnub.getMessage('myChannel1');\n```\n\nAlso you can use a callback to know when the retrieving process has finished.\n\n```javascript\nvar myStack1 = pubnub.getMessage('myChannel1', () =\u003e {\n  console.log(myStack1);\n});\n```\n\n","funding_links":[],"categories":["Uncategorized","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)"],"sub_categories":["Uncategorized","Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpubnub%2Fpubnub-angular2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpubnub%2Fpubnub-angular2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpubnub%2Fpubnub-angular2/lists"}