Simple data emitter and subscriber from scratch in JS

Tushar Upadhyay — Mon, 31 Oct 2022 14:31:03 +0000

Have to ever used a Reactive setup in JS?Lets try to make it from scratch

So if you have used any reactive stuff in JS, it mainly contains two methods, one for emitting the data and one for listen the changes by subscribing to it.

Lets say we have a class CustomRxm, So it should have two methods emit and subscribe

class CustomRx{
   constructor(initialData:string){
      this.data = initialData;
   }
   emit(data:string){
   }
   subscribe(callback:Function){

   }
}

We will going to use these methods like:

const rx = new CustomRx('tushar');
rx.subscribe((data:string)=>{
   console.log(data)
})
rx.emit('new name');
rx.emit('some new data');

Lets code these methods:-

See we are getting a callback function as an argument in subscribe method.The trick is to store this as class variable and call this in emit method with new data as argument.
(Since this is a simple example this will only work with one subscriber)

class CustomRx{
   constructor(initialData:string){
      this.data = initialData;
   }
   emit(data:string){
      this.data = data;
      this.callback(this.data);
   }
   subscribe(callback:Function){
      this.callback = callback;
   }
}

In action:-

const rx = new CustomRx('tushar');
rx.subscribe((data:string)=>{
   console.log(data)
})
setInterval(()=>{
  rx.emit('new name');
},1000)

// 'new name' will be printed out in console each 1 second

How to build async pipe in Angular from scratch

Tushar Upadhyay — Mon, 31 Oct 2022 13:58:46 +0000

But what is a Pipe in Angular?
Pipes are used to transform input data into something. For example we have async pipe which takes a Promise or Observable and transforms it to a resolved or latest value in case of a observable.

Built in async pipe in Angular
Angular has a built in pipe async we are going to make it from scratch but first understand how it works

As you can see we have a variable of type promise name which will resolve to ‘Angular 14’ after 3 seconds. Lets try to use it in our HTML file

But in output we can’t see Angular 14 after 3 seconds instead [Object Promise] is being shown in the output

So lets use async pipe to fix this

So by just adding | async we can see it showed ‘Angular 14’ after 3 seconds

Ok so now the interesting part lets try to code this pipe from scratch:-

So how this works?

See, we have used impure pipe by setting pure=false, because we want to call transform method when value(this.value) changes.

Intially the value is null so it will return null first when the promise is in pending state but after 3 seconds it will update the value to whatever data we have passed and this will cause transorm method to rerun and we will see ‘Angular 14’ in the output.

How to use this?

Add CustomAsync class in the declarations array in app.module.ts and use {{name | customAsync}}

Checkout its demo

https://stackblitz.com/edit/angular-ivy-oamp4e

DEV Community: Tushar Upadhyay

Simple data emitter and subscriber from scratch in JS

How to build async pipe in Angular from scratch