[DSC-1751] Hide the altmetric label when there is no data available

Author: alisaismailati

src/app/shared/metric/metric-altmetric/metric-altmetric.component.html

@@ -17,7 +17,7 @@
       [attr.data-link-target]="remark | dsListMetricProps : 'data-link-target' : isListElement"
     ></div>
   </div>
-  <div class="font-weight-bold" *ngIf="!hideLabel">
+  <div class="font-weight-bold" *ngIf="!hideLabel && (showAltmetricLabel$ | async)">
     {{ "item.page.metric.label." + metric.metricType | translate }}
   </div>
 </div>

src/app/shared/metric/metric-altmetric/metric-altmetric.component.ts

@@ -1,7 +1,8 @@
-import { AfterViewChecked, Component, OnInit } from '@angular/core';
+import { AfterViewChecked, AfterViewInit, Component, OnInit, Renderer2 } from '@angular/core';
 import { BaseEmbeddedMetricComponent } from '../metric-loader/base-embedded-metric.component';
 import { DomSanitizer } from '@angular/platform-browser';
 import { hasValue } from '../../empty.util';
+import { BehaviorSubject } from 'rxjs';
 
 declare let _altmetric_embed_init: any;
 
@@ -10,10 +11,14 @@ declare let _altmetric_embed_init: any;
   templateUrl: './metric-altmetric.component.html',
   styleUrls: ['./metric-altmetric.component.scss', '../metric-loader/base-metric.component.scss']
 })
-export class MetricAltmetricComponent extends BaseEmbeddedMetricComponent implements OnInit, AfterViewChecked {
+export class MetricAltmetricComponent extends BaseEmbeddedMetricComponent implements OnInit, AfterViewChecked, AfterViewInit {
   remark: JSON;
+  /**
+   * Flag to show the altmetric label
+   */
+  showAltmetricLabel$: BehaviorSubject<boolean> = new BehaviorSubject(false);
 
-  constructor(protected sr: DomSanitizer) {
+  constructor(protected sr: DomSanitizer, private renderer: Renderer2) {
     super(sr);
   }
 
@@ -33,4 +38,11 @@ export class MetricAltmetricComponent extends BaseEmbeddedMetricComponent implem
       this.hide.emit(true);
     }
   }
+
+  ngAfterViewInit(): void {
+    // Show the altmetric label only when the altmetric component is ready
+    this.renderer.listen(this.metricChild.nativeElement, 'altmetric:show', () => {
+      this.showAltmetricLabel$.next(true);
+    });
+  }
 }