A simple publisher/subscriber service.
This repository is forked from angular-pubsub and
the only reason I changed it was to use RXJs version 6 and above. and updated the angular packages.
All credit goes to the owner and contributers of angular-pubsub repo.
Import service in your codes or download via npm or bower.
npm i --save angular7-pubsub
Add module bundle to imports in your application.
...
import { PubSubModule } from ' angular7-pubsub ' ;
@ NgModule ( {
declarations : [
RootComponent ,
NavigationComponent ,
OverlayComponent
] ,
imports : [
BrowserModule ,
FormsModule ,
HttpModule ,
PubSubModule . forRoot ( )
] ,
providers : [ ] ,
bootstrap : [ RootComponent ]
} )
...
And import service wherever you want
declare class PubSubService {
private events : Object ;
$pub ( event : string , eventObject ? : any ) : void ;
$sub ( ) : undefined ;
$sub ( event : string ) : Observable < any > ;
$sub ( event : string , callback : ( value : any ) => void ) : Subscription ;
$sub ( event : string , callback : ( value : any ) => void , error : ( error : any ) => void ) : Subscription ;
$sub ( event : string , callback : ( value : any ) => void , error : ( error : any ) => void , complete : ( ) => void ) : Subscription ;
}
Publish event to all subscriber.
etc.
export class OverlayComponent implements OnInit , OnDestroy {
constructor ( private pubsub : PubSubService ) { }
anyFunc ( ) {
this . pubsub . $pub ( ' pleaseCloseSidenav ' , ' helloIAmOverlay ' ) ;
}
}
Subscribe to channel.
etc.
export class NavigationComponent implements OnInit , OnDestroy {
closeSidenavSub : Subscription ;
openSidenavSub : Subscription ;
constructor ( private pubsub : EventDispatcherService ) { }
ngOnInit ( ) {
this . closeSidenavSub = this . pubsub . $sub ( ' pleaseCloseSidenav ' ) . subscribe ( ( from ) => {
this . sidenavOpened = false ;
} ) ;
this . openSidenavSub = this . pubsub . $sub ( ' pleaseOpenSidenav ' , ( from ) => {
this . sidenavOpened = true ;
} ) ;
}
ngOnDestroy ( ) {
this . closeSidenavSub . unsubscribe ( ) ;
this . openSidenavSub . unsubscribe ( ) ;
}
See Changelog $sub method have one bug. RxJS Subscriber call subscribe method on start like Angular 1.x $scope.$watch.
Follow the steps to run the tests and build the source code.
npm install
npm test
npm run build
Commands above will generate the ready to use bundles under the ./dist folder.
