Popup is not working with angular-esri-component

[abhishekhingu]

Trying to bind content of popup for click geometry dynamically. but popup don't render on screen

import { Component, OnInit } from '@angular/core'; import { Router, ActivatedRoute } from '@angular/router'; import { EsriModuleProvider } from 'src/app/citymap/core/city-module-provider';

@Component({ selector: 'app-livability', templateUrl: './livability.component.html', styleUrls: ['./livability.component.scss'] }) export class LivabilityComponent implements OnInit {

title = 'app';

mapProperties: __esri.MapProperties = { basemap: 'gray-vector' }; mapViewProperties: __esri.MapViewProperties = { center: [54, 24], zoom: 9, }; map: __esri.Map; mapView: __esri.MapView; districtFeatureLayer: __esri.FeatureLayer; distCollection: any[] = []; output: any[] = []; distFields: any = {}; activecategory:string; //School objects schoolFeatureLayer: __esri.FeatureLayer; bufferSchoolLayer: __esri.FeatureLayer; selectedSchoolsId: any[] = []; selectedSchool: any[] = [];

constructor(private route: ActivatedRoute, private router: Router, private moduleProvider: EsriModuleProvider) { }

ngOnInit() { console.log("onInit Called"); } service(): void { console.log("service called"); this.router.navigateByUrl("livability/service") } onMapInit(mapInfo: { map: __esri.Map, mapView: __esri.MapView }) { this.map = mapInfo.map; this.mapView = mapInfo.mapView;

// add a layer with sublayers to map
this.moduleProvider
  .require(['esri/layers/FeatureLayer', "esri/tasks/support/Query",
    "esri/tasks/QueryTask", "esri/renderers/ClassBreaksRenderer", "esri/Color", "esri/symbols/SimpleFillSymbol","esri/widgets/Popup"])
  .then(
    ([FeatureLayer, Query, QueryTask, ClassBreaksRenderer, Color, SimpleFillSymbol,Popup]) => {
      const distrenderer: any = {
        type: "class-breaks",
        // attribute of interest - Earthquake magnitude
        field: "total_score",
        defaultSymbol: {
          type: "simple-fill",  // autocasts as new SimpleFillSymbol()
          color: "#D3D3D3",
          style: "solid",
          outline: {
            width: 0.5,
            color: [50, 50, 50, 0.6]
          }
        },
        classBreakInfos: [
          {
            minValue: -1,  // 0 acres
            maxValue: 2,  // 200,000 acres
            symbol: {
              type: "simple-fill",  // autocasts as new SimpleFillSymbol()
              color: "#ce4656",
              style: "solid",
              outline: {
                width: 0.2,
                color: [255, 255, 255, 0.5]
              }
            }  // will be assigned sym1
          }, {
            minValue: 2,  // 200,001 acres
            maxValue: 4,  // 500,000 acres
            symbol: {
              type: "simple-fill",  // autocasts as new SimpleFillSymbol()
              color: "#df8e97",
              style: "solid",
              outline: {
                width: 0.2,
                color: [255, 255, 255, 0.5]
              }
            }  // will be assigned sym2
          }, {
            minValue: 4,  // 500,001 acres
            maxValue: 6,  // 750,000 acres
            symbol: {
              type: "simple-fill",  // autocasts as new SimpleFillSymbol()
              color: "#f6d026",
              style: "solid",
              outline: {
                width: 0.2,
                color: [255, 255, 255, 0.5]
              }
            }  // will be assigned sym2
          }, {
            minValue: 6,
            maxValue: 8,
            symbol: {
              type: "simple-fill",  // autocasts as new SimpleFillSymbol()
              color: "#7db39b",
              style: "solid",
              outline: {
                width: 0.2,
                color: [255, 255, 255, 0.5]
              }
            }
          }, {
            minValue: 8,
            maxValue: Infinity,
            symbol: {
              type: "simple-fill",  // autocasts as new SimpleFillSymbol()
              color: "#2a835b",
              style: "solid",
              outline: {
                width: 0.2,
                color: [255, 255, 255, 0.5]
              }
            }
          }
        ]
      };

      
      this.districtFeatureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/CongressionalDistricts/FeatureServer/0", {
        outFields: ['*'],
        //renderer: distrenderer
        // showLabels: true
        //popupTemplate:{content:"Abhishek",title:"Abhishek"}
      });
      

      this.map.layers.addMany([this.districtFeatureLayer]);
      let AdquateSchoolQuery: __esri.Query = new Query();

      this.mapView.on("click",(event:any)=>{
        this.mapView.hitTest(event.screenPoint).then((response:any)=> {
          if (response.results.length > 0) {
            response.results.forEach((item:any)=>{
              if(item.graphic.geometry != null){
                //this.mapView.popup.set("visible", true);
                this.mapView.popup.content = '<div>ZZJjjdja dad</div>';
              }
            })
          }
        });
      })

    });

} onLayerAdded(event: any) { console.log("layers added", event); if (event.added.length > 0) { event.added.forEach(function (layer) { var info = "
layer added: " + layer.title; console.log(info); }); } }

}