.NET Core SignalR Hub+ Angular Observable

TL;DR: Deliver all the table content continuously paginated to the browser with .NET Core and Angular

Long Description:

I was thinking that delivering paginating data is kind of lame. Why should I , for seeing the whole data, should keep pressing next page / or scrolling  down ? I understand that on the server it is necessary to do this – but on the client ?

And I was thinking – what about Observables in Angular  , combined with SignalR ? Those observables could obtain data every time – and SignalR is pushing cotinously, until it arrives at the end of the data.

Done with talking –  let’s show some code:

We have an Employee classs

public class Employee
        public string Name { get; set; }
        public int Id { get; set; }



and we are feeding with data in a DALEmployee

public class DalEmployee
        public int FindCountEmployees(string name)
            return ((name ?? "").Length + 1) * 10;

        public async Task<Employee[]> FindEmployee(int pageNumber, int pageSize, string name)
            await Task.Delay((pageNumber + 1) * 1000);
            var ret = new Employee[pageSize];
            int startNumber = (pageNumber - 1) * pageSize;
            for (int i = 0; i < pageSize; i++)
                var e =new Employee();
                e.Id = startNumber + i;
                e.Name = e.Id + "employee ";
                ret[i] = e;

            return ret;

We have SignalR that delivers continously the data via a Hub that is connected to an URL

//do not forget  services.AddSignalR().AddJsonProtocol()  ;
            app.UseSignalR(routes =>

and delivers all data continuously

 public class MyHub: Hub
        public override async Task OnConnectedAsync()
            await Task.Delay(1000);
        public ChannelReader<Employee[]> GetEmps(string name)
            var channel = Channel.CreateUnbounded<Employee[]>();
            _ = WriteItems(channel.Writer, name); //it not awaits!

            return channel.Reader;

        private async Task WriteItems(ChannelWriter<Employee[]> writer, string name)
            var dal = new DalEmployee();
            var nr = dal.FindCountEmployees(name);
            int nrPages = 10;
            for (int i = 0; i < nr / nrPages; i++)
                var data = await dal.FindEmployee(i+1, nrPages, name);
                await writer.WriteAsync(data);


And this is all that is required on the .NET Core side

For the Angular Part

We have a hubconnectionbuilder that connect to the hub

export class MydataService {

  constructor(private http: HttpClient) { 
    this.h= new HubConnectionBuilder()
      .withUrl(environment.urlAPI + "/employees")
      .withHubProtocol(new JsonHubProtocol())
      //.withHubProtocol(new MessagePackHubProtocol())
    .catch((t) => window.alert(1));

and a observable that returns the values

  public getAllEmpsStream(name:string): Observable<Employee[]>{
    const subject = new Subject<Employee[]>();
    return subject.asObservable();


The code on the component is aggregating the values into an array

      .pipe(finalize(() => this.load=false))
      .subscribe(it  => {



And that is all. All the values are returned page after page without the need of human intervention…