FarmMapsLib/projects/common-map/src/fm-map/components/feature-list-feature-container/feature-list-feature-container.component.ts

import { Component, Input, OnInit, ComponentFactoryResolver, ViewChild, SimpleChanges, ComponentFactory, Inject, Type} from '@angular/core';
import { Feature } from 'ol';
import { AbstractFeatureListFeatureComponent,FeatureListFeatureComponent } from '../feature-list-feature/feature-list-feature.component';
import { WidgetHostDirective } from '../widget-host/widget-host.directive';


@Component({
  selector: 'fm-map-feature-list-feature-container',
  template: `
              <div>
                 <ng-template fm-map-widget-host></ng-template>
              </div>
            `
})
export class FeatureListFeatureContainerComponent {

  constructor(private componentFactoryResolver: ComponentFactoryResolver, @Inject(AbstractFeatureListFeatureComponent) public featureLists: AbstractFeatureListFeatureComponent[] ) {
  }

  @Input() feature: Feature;

  @ViewChild(WidgetHostDirective, { static: true }) widgetHost: WidgetHostDirective; 

  loadComponent() {
    var componentFactory: ComponentFactory<AbstractFeatureListFeatureComponent> = this.componentFactoryResolver.resolveComponentFactory(FeatureListFeatureComponent); // default
   
    let selected = -1;
    let maxMatches =0;
    for (let i = 0; i < this.featureLists.length; i++) {
      let matches=0;
      if (this.featureLists[i]['forItemType'] == this.feature.get("itemType")) {
         matches++;
      }         
      if(matches > maxMatches) {
        selected=i;
        maxMatches = matches;
      }
    }
    if (selected >= 0) {
      componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.featureLists[selected]['constructor'] as any);        
    }     

    const viewContainerRef = this.widgetHost.viewContainerRef;
    viewContainerRef.clear();

    const componentRef = viewContainerRef.createComponent(componentFactory);
    (<AbstractFeatureListFeatureComponent>componentRef.instance).feature = this.feature;
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes["feature"] && changes["feature"].currentValue) {
        this.loadComponent();
    }
  }
}