Как я могу связать значение атрибута различных элементов HTML, используя единую пользовательскую директиву атрибута в Angular 7?

Question

Я пытаюсь реализовать отложенную загрузку изображений с помощью Intersection Observaber API.

Сценарий: у меня есть массив изображений в component.ts. Я создал директиву для реализации Intersection Observable API. Я использую селектор директивы атрибута в элементе HTML. Я беру ElementRef с помощью селектора, а затем использую его, чтобы установить «src», как когда изображение попадает в область просмотра.

Требование Я застрял на:

Я хочу показать соотношение пересечений изображения из области просмотра, соответствующее в другом теге HTML-элемента. Я использую индикатор выполнения углового материала для обновления коэффициента пересечения. Чем отличается элемент от того, где используется селектор директивы атрибута, как я могу динамически привязать значение индикатора выполнения при получении значения во время загрузки изображений?

Directive.ts

@HostBinding('attr.src') imageSrc = null;
@Input() src: string;
@HostBinding('attr.value') intersectionValue;
thresholdSet = [];
observerOptions = {
    root: null,
    rootMargin: "0px",
    threshold: []
  };

constructor(private elementRef: ElementRef) {
    this.generateThreshold();
  }

generateThreshold() {
    for (let i = 0; i <= 1.0; i += 0.01) {
      this.thresholdSet.push(i);
    }
  }

ngAfterViewInit() {
    this.lazyLoadImage()
}

lazyLoadImage() {    
    this.observerOptions.threshold = this.thresholdSet;
    const observe = new IntersectionObserver(entries => {     
      entries.forEach(entry => {
        let box = entry.target;
        let visibleRatio = (Math.floor(entry.intersectionRatio * 100)) + "%";        
        if (entry.isIntersecting) {
          this.imageSrc = this.src;
        }
      })
    }, this.observerOptions)

    observe.observe(this.elementRef.nativeElement);
}

HTML

<mat-card  class="example-card outerDiv" *ngFor="let dummy of dummydata; trackBy: trackIndex">
  <mat-card-header>
    <mat-card-title>
      {{dummy.name}}
    </mat-card-title>

  </mat-card-header>
  <img appLazyLoading [src]="dummy.image" alt="image description" class="imageElement">
  <br>
  <mat-progress-bar class="bottomRight" mode="determinate" [value]='intersectionValue'></mat-progress-bar>

</mat-card>

Как связать атрибут значения <mat-progress-bar>, поскольку я использую селектор директивы в теге <img>, если я использую селектор втег корневого элемента <mat-card>, ленивая загрузка не работает. Пожалуйста, кто-нибудь может помочь?