Displaying all layers in ArcGIS feature service in Angular application

[NaveedKarlous]

As you can see in the below living atlas layer, there are multiple layers inside (state,county,tract etc..)

But when I add this link, it will display only the first layer.(State). Then, when I zoom in the map, that layer disappears.

I want to display all the 4 layers of that feature service.(state,county, tract, blockgroups)

How do I achieve this?

.ts

const genderLayer = new FeatureLayer({
url: "https://services2.arcgis.com/FiaPA4ga0iQKduv3/ArcGIS/rest/services/US_Census_Age_Gender/FeatureServer",
});
const layersToCreateMyPopupTemplate = [ageLayer,genderLayer];

const map = new Map({
basemap: 'topo-vector',
layers: layersToCreateMyPopupTemplate
});

const view = new MapView({
container,
map: map,
zoom: 3,
center: [-97.63, 38.34],
});

.html

<!-- Map Div -->
<div #mapViewNode></div>

[ReneRubalcava]

You have two options

Layer.fromArcGISServerUrl

https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-Layer.html#fromArcGISServe...

Or using Layer.fromPortalItem

https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-Layer.html#fromPortalItem

The root on the service will give you the itemId

I even did a video on this