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);
});
}
}

}