firebase fetch download url infinite loop request

Question

when trying to getDownloadURL from firebase storage i get same issue an infinite request and this is Mycode:

Mycomponent HTML

 <div *ngIf="(geturlimagefromserver() | async)  as imgc ;else loadiing ">
       <img 
            class="card-img-top"
            alt="robot3_image_robot.png"
            [src]="imgc | ''" 
            data-holder-rendered="true"
            style="    margin: 4px;
            width: 246px;
            height: 175px; display: block;"
          /> 
          </div>
          <ng-template #loadiing>

            <div class="text-menuted">Loading image...</div>
          </ng-template>

Mycomponent Component

geturlimagefromserver():Observable <any>{
  console.log('i get hier infinite loop ');
 return this.RobotService.getMetadata(path);
}

i saw in my console infinity print the word "i get hier infinite loop "

MyService Service

  getMetadata() :Observable <any>{
    const ref = this.storage.ref('myfile/img1');
   return ref.getDownloadURL();}

the big problem

is when i calling the function :

geturlimagefromserver() in Mycomponent.html i get infinite Request in network from my browser

but when i calling my function : getMetadata() in Mycomponent.component.ts like this

 this.MyService.getMetadata().subscribe(data=>{
      }) 
      console.log("its work so fun");

  console.log(data);

      }

its work so fun and he give met exactly url downloader from fire storage

Answer 1

Is not so much you are in an infinite loop , what happens is the function get Url is getting called every time angular checks the DOM, so it seems like an infinite loop.

You should avoid using functions directly on the html for said reason, do it on the component, or you can use a pipe.

In short is not an issue with firebaseStorage but how the changeDetection works within Angular.