Get started with Angular and ArcGIS Maps SDK for JavaScript

For Angular applications, use the @arcgis/map-components package. The package provides industry-standard web components built on @arcgis/core, reducing boilerplate while keeping the underlying API fully accessible.

For more information on working with components, assets and configuring CSS, see the Get started with npm guide topic.

Steps

Install map components

Install the @arcgis/map-components package along with its dependencies:

1
2

    npm install @arcgis/map-components

Configure Angular schema

Configure Angular's CUSTOM_ELEMENTS_SCHEMA. This is a standard pattern for allowing non-Angular elements to be used inside Angular components:

1
2
3
4
5
6
7
8
9
10
import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit } from "@angular/core";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: "./app.component.html",
  styleUrl: "./app.component.css",
  schemas: [CUSTOM_ELEMENTS_SCHEMA], // Set the schema here
})

Configure CSS

Configure the map component's styles in the Angular component's CSS file. The CSS selectors and settings may vary depending on how your project's unique requirements:

1
2
3
4
5
6
7
8
@import url("https://js.arcgis.com/4.32/@arcgis/core/assets/esri/themes/dark/main.css");
@import url("https://js.arcgis.com/calcite-components/3.0.3/calcite.css");
@import url("https://js.arcgis.com/map-components/4.32/arcgis-map-components.css");

arcgis-map {
  display: block;
  height: 100vh;
}

Add the following to the global stylesheet in your Angular project:

1
2
3
4
html,
body {
  margin: 0;
}

Add a map

Add the arcgis-map component and its necessary imports to the app.component.html file. If using a WebMap from ArcGIS Online or an ArcGIS Enterprise portal, assign it an optional item-id. See the tutorial for step-by-step instructions.

1
<arcgis-map item-id="05e015c5f0314db9a487a9b46cb37eca"></arcgis-map>

Also, add the respective import to the root component:

1
import "@arcgis/map-components/components/arcgis-map";

Add additional functionality

Once that's completed, you can:

• Set properties, e.g. the basemap, center and zoom
• Use the arcgisViewReadyChange event to watch for when the view is ready or if the view's map or scene have been replaced
• Add custom JavaScript logic using the core API.

Here is an example of adding the arcgis-zoom component to the map, and then implementing the functionality to listen for change events.

Add the arcgis-zoom component inside the arcgis-map component, and assign its position to the top-left corner of the map. Then bind arcgis-map to the arcgisViewReadyChange event:

1
2
3
<arcgis-map item-id="05e015c5f0314db9a487a9b46cb37eca" (arcgisViewReadyChange)="arcgisViewChange($event)">
   <arcgis-zoom position="top-left"></arcgis-zoom>
</arcgis-map>

Last, add the import for arcgis-zoom into the root component, and set an event listener inside the app component's class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import "@arcgis/map-components/components/arcgis-map";
import "@arcgis/map-components/components/arcgis-zoom";

. . .

export class AppComponent {

  arcgisViewReadyChange(event: CustomEvent) {
    const { center, zoom } = event.target;
    console.log("Center (lon/lat): ", `${center.longitude}, ${center.latitude}`);
    console.log("Zoom: ", zoom);
  }

}

See the tutorial for step-by-step instructions.

Download project

You can download the Angular sample projects from the jsapi-resources GitHub repository:

• Map components sample
• @arcgis/core sample