Complete Angular Example

Component - az.component.html

<div class="row">
  <div class="col-md-4" *ngFor="let key of blobsList | keys">
    <p><img src="{{blobsList[key].blobURL}}" height="100" width="100"></p>
    <p><a class="btn btn-default" href="#">{{blobsList[key].blobName}}</a></p>
  </div>
</div>

Component - az.component.ts

getAllBlobs() : void {
    this.azureblobService.getAllBlobs()
      .subscribe(
        (val) => {
          console.log("POST call successful value returned in body",
            val);
          this.blobsList = val; //<====== Set value here
        },
        response => {
          console.log("POST call in error", response);
        },
        () => {
          console.log("The POST observable is now completed.");
        });
  }

Model - az.ts

export class Azureblob {
  blobName: string;
  blobURL: string;
  blboMimeType: string;
}

Pipe - az.pipe.ts

@Pipe({
  name: 'keys'
})
export class KeysPipe implements PipeTransform {
  transform(value: any, args?: any): any {
    return Object.keys(value);
  }
}

Service - az.service.ts

getAllBlobs() {
    console.log("....AzureblobService.getAllBlobs()");
    const headers = new HttpHeaders({
      'Content-Type': 'application/json',
      'Accept' : 'application/json'
    });

    return this.http.post<Azureblob[]>(this.serverUrl,
      JSON.stringify({
        "azureAcountName": "acsazurestore",
        "azureAcountKey": "qjC6s44AmSbAkJ7Xqdsks/jjZDIYRTY8qgWKds8w8PXdL+Q08mU/yu3Oh/4wO3sYTwNgNiA6EG66gBRWBqMBNA==",
        "azureContainer":"acsazurecontainer",
      }),{headers: headers});
  }
}