Angular 6 - How to stop infinite polling in subscribe()

Question

So I want to show an icon based on whether or not the number of projects in my list is > 3. I am using this getProjects() function that I need to subscribe to in order to get the data. I am setting a boolean when I subscribe that checks the number of projects in the list, then in my HTML, I use a ngIf to show the icon based on the boolean. I am able to get it to show correctly, however, I think I am constantly polling in my subscribe, and setting this boolean over and over again because it is making my webpage run really slow.

I have already tried the take(1) method which doesnt seem to stop the subscription, as well as set it to a "this.variable" scope inside my component. I am currently using event emitters however that is not working either.

This is my code so far,

Function that I subscribe to (in a different component):

getProjects(): Observable<ProjectInterfaceWithId[]> {
    const organizationId = localStorage.getItem('organizationId');
    return this.firestoreService.collection('organizations').doc(organizationId)
      .collection('projects').snapshotChanges()
      .pipe(
        map(actions => actions.map(a => {
          const data = a.payload.doc.data() as ProjectInterface;
          const id = a.payload.doc.id;
          return {id, ...data} as ProjectInterfaceWithId;
        })),
        map(list => {
          if (list.length !== 0) {
            this.buildProjectLookup(list);
            this.projects = list;
            return list;
          }
        })
      );
  }

Function that i use to get the data and set the boolean:

@Input() toggle: boolean;
@Output() iconStatus = new EventEmitter();

displayIcon() {
    this.projectService.getProjects()
      .pipe(take(1))
      .subscribe(
        list => {
          if(list.length >= 3){
              this.toggle = true;
              this.iconStatus.emit(this.toggle);
          }
        });
  }

HTML:

<i *ngIf="displayIcon()" class="material-icons">list</i>

Is there any way for me to literally just check the list length once so I don't get caught in this subscription loop? Thank you in advance!

Answer 1

It looks like it could be happening due to the ngIf referring to the displayIcon() method.

Every time change detection runs within your component, this method will be called. If your component is using default change detection, this will be very often.

see https://blog.angular-university.io/how-does-angular-2-change-detection-really-work/ for more

One way this could be fixed is by making the ngIf refer to a variable instead. For example, you could set a projects$ observable using

this.projects$ = this.projectService.getProjects()
      .pipe(
         take(1),
         tap(projects => this.iconStatus.emit(projects.length >= 3))
      );

This observable should likely be instantiated in your ngOnInit() method. Then in your template you can use

<i *ngIf="(projects$ | async)?.length >= 3" class="material-icons">list</i>