angular memory leak need to know how to solve leak

I have a code that is leaking and I need to know why or how to unsubscibe correcly .
since even when I added an array that is all objects subscibed are being deleted it still leaks

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { of } from 'rxjs';
import { delay, tap, mergeMap, repeat } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  postId;
  
  callOmni = () => of(this.pollOmni()).pipe();
  display = response => {};
  poll = of({}).pipe(
  mergeMap(_ => this.callOmni()),
  tap(this.display),
  delay(10),
  repeat()
);

  constructor(private http: HttpClient) { } 
  pollOmni() {      
    // Simple POST request with a JSON body and response type <any>
    this.http.post<any>('http://127.0.0.1:8084/api', { call: 'getinfo' }).subscribe(
      data => {
        this.postId = data;
        console.log(this.postId);
        }),
        error => {
          console.log('oops', error)
        }
     
   
  }

  ngOnInit() {      
    // Simple POST request with a JSON body and response type <any>
   
    this.poll.subscribe();
  }

}

In your code, it seems that you have a subscription inside the pollOmni() method, which is called multiple times. This can lead to multiple active subscriptions that are not unsubscribed, causing a memory leak.

To fix this, you need to make sure that you unsubscribe from the subscription when it's no longer needed. One way to achieve this is by storing the subscription in a variable and unsubscribing from it when necessary.

Here's an updated version of your code that implements the necessary changes:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { of, Subject } from 'rxjs';
import { delay, tap, mergeMap, repeat, takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  postId;
  private ngUnsubscribe = new Subject<void>(); // Subject for unsubscribing

  constructor(private http: HttpClient) { }

  callOmni = () => of(this.pollOmni()).pipe();

  display = response => {
    // Display logic here
  };

  poll = of({}).pipe(
    mergeMap(_ => this.callOmni()),
    tap(this.display),
    delay(10),
    repeat(),
    takeUntil(this.ngUnsubscribe) // Unsubscribe when ngUnsubscribe emits
  );

  pollOmni() {
    return this.http.post<any>('http://127.0.0.1:8084/api', { call: 'getinfo' });
  }

  ngOnInit() {
    this.poll.subscribe();
  }

  ngOnDestroy() {
    this.ngUnsubscribe.next(); // Emit value to unsubscribe from ongoing subscriptions
    this.ngUnsubscribe.complete(); // Complete the subject
  }
}

Something like that:

export class AppComponent implements OnInit, OnDestroy {    
  ...

  ngOnDestroy(): void {
    this.poll.unsubscribe();
  }
}

In your code implement the OnDestroy Life cycle hook in angular and unsubsribe it in ngOnDestroy mehthod like below:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { of } from 'rxjs';
import { delay, tap, mergeMap, repeat } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {

  postId;
  private unsubscribe = new Subject<void>();
  callOmni = () => of(this.pollOmni()).pipe();
  display = response => {};
  poll = of({}).pipe(
  mergeMap(_ => this.callOmni()),
  tap(this.display),
  delay(10),
  repeat(),
  takeUntil(this.unsubscribe)
);

  constructor(private http: HttpClient) { } 
  pollOmni() {      
    
    this.http.post<any>('http://127.0.0.1:8084/api', { call: 'getinfo' }).subscribe(
      data => {
        this.postId = data;
        console.log(this.postId);
        }),
        error => {
          console.log('oops', error)
        }
     
   
  }

  ngOnInit() {      
    this.poll.subscribe();
  }

ngOnDestroy(): void {
    this.unsubscribe.next(); 
   this.unsubscribe.complete();
  }
}

If the above does not works for you I suggest to implement the template mechanism in Angular Angular Async Pipe Please refer the below sample on usage of pipes in Angular.
Please note that Below is sample implementaions:

  @Component({
      selector: 'app-stock',
      template: `
        <div *ngIf="stocks$ | async as stocks">
          <ul>
            <li *ngFor="let stock of stocks">
              {{ stock.symbol }}
            </li>
          </ul>
        </div>
      `,
      styleUrls: ['./stock.component.scss'],
    })
    export class StockComponent implements OnInit {
      stocks$: Observable<Stock[]> = this.stockService.getStocks();
    
      constructor(private stockService: StockService) {}
    
      ngOnInit(): void {}
    }