Angular CLI cluster creation with custom lat and long

[ekkuluriravi]

Hi, Its a basic question. I started learning. 
I am looking for a Angular CLI support clustered maps with custom lat and long.

Thanks

[AndyGup]

@ekkuluriravithere is an SDK Guide Topic covering cluster here: https://developers.arcgis.com/javascript/latest/sample-code/featurereduction-cluster/. My recommendation is get the functionality working in vanilla JS first and then migrate it to Angular.

Also, here is our Angular CLI example: https://github.com/Esri/jsapi-resources/tree/master/esm-samples/jsapi-angular-cli

[RaviKumarEkkuluri]

Thanks @AndyGup for the response. Could you please help me how do i show the clusters with my Json(lat,lng and name). Any examples in vanilla js that will help

[AndyGup]

@RaviKumarEkkuluriif you are using a FeatureLayer for clustering, then take a look at the code snippet example in the source property: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#source. Also take a look at the API doc for point Geometry: https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-Point.html. 

One caveat with Angular and TypeScript is you have to explicitly declare all ArcGIS JS API classes because of a well-known limitation in TypeScript. You'll have to convert your JSON to an array of Graphics, and then add those Graphics to FeatureLayer.source. Here's an example of how it will work in the API:

import FeatureLayer from '@arcgis/core/layers/FeatureLayer';
import Graphic from "@arcgis/core/Graphic";
import Point from "@arcgis/core/geometry/Point";
    
let point = new Point(
 {
    latitude: 100,
    longitude: 30
 });

let tempGraphic = new Graphic({
  geometry: point,
  attributes: {
     ObjectID: 1,
     DepArpt: "KATL",
     MsgTime: Date.now(),
     FltId: "UAL1"
   }
});

let layer = new FeatureLayer({
  source: [tempGraphic],  
  objectIdField: "ObjectID"
}); 

[RaviKumarEkkuluri]

Thanks @AndyGup the above steps helped. 
Could you please suggest how to access all cluster data in the popupTemplate.

I am looking like the following example in Typescript
https://developers.arcgis.com/javascript/3/sandbox/sandbox.html?sample=layers_point_clustering

I tried with this example, but not able to access ClusterLayer.js in my Angular app.