Angular Function that is always loading (automatically)

Question

I have a function that loads referring data and images and another that loads the image itself from a folder.

Is there a way to always have the function that loads images, always working? That is, if you upload an image, this function will be automatically executed and will upload that image.

At the moment I am executing the function using (click), but what I want is that it is always being executed automatically.

HTML

<div class="container-fluid first">
      <div class="row tab-pane Galeria">
        <div *ngFor="let product of products" (click)="ImageInfo($event,product.id)" class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
          <div class="image-item">
            <a class="d-block image-block h-100" >
              <img [src]="Imagenss" class="Images img-fluid" alt="">
              <div class="ImageText"> {{product.name}}</div>
            </a>
          </div>
        </div>
      </div>
    </div>

Component.ts

ImageInfo(e, id) {
    if (e != null) {
      this.ID = id;
    }

    var self = this;

      self.homeService.getImage(self.ID).then(function (resultado) {
        if (resultado) {
          self.Imagenss = resultado;
        }
      }).catch(); 
  }

Answer 1

Your question is very unclear so I am not sure that this is exactly what you want to do, but you can use the function setInterval to run your function that uploads the images automatically every X milliseconds.

Two side notes regarding your code:

1. You should use let instead of var, the scope isn't the same and you can get unwanted results if you use var: What's the difference between using "let" and "var"?
2. You don't need to use self = this, if you use an anonymous function as callback then you can use this directly:

ImageInfo(e, id) {
    if (e != null) {
      this.ID = id;
    }

    this.homeService.getImage(this.ID).then(resultado => {
        if (resultado) {
            this.Imagenss = resultado;
        }
    }).catch(); 
}