Using the SDK in an Angular app

The SDK’s web components are non-Angular elements. For them to be used inside of Angular components, you’ll need to configure Angular’s CUSTOM_ELEMENTS_SCHEMA.

Before you start, make sure you are using the latest long-term support (LTS) version of node.js and npm.

Installation

To use Map components in your Angular project, install the @arcgis/map-components package and its dependencies:

npm install @arcgis/map-components @arcgis/core @esri/calcite-components

yarn add @arcgis/map-components @arcgis/core @esri/calcite-components

pnpm install @arcgis/map-components @arcgis/core @esri/calcite-components

Configure CSS

Currently in Angular, the map component’s CSS is bundled but not automatically loaded in production builds. The CSS should be imported explicitly in the project’s root stylesheet. Add the following to src/styles.css:

@import "@esri/calcite-components/main.css";
@import "@arcgis/map-components/main.css";

Create a layout

In your template (for example app.html), add the 2D Map component (or 3D Scene component). Each component is a custom element that you can add to your application using an HTML tag.

For HTML IntelliSense in app.html, visit the IntelliSense documentation. When working in a framework like Angular, it’s generally recommended to use the events from the SDK’s components rather than direct method calls for better integration with the component and Angular lifecycle.

<arcgis-map
  item-id="45b77c869ba14b6dbc2de43a817304a6"
  (arcgisViewReadyChange)="arcgisViewReadyChange($event)"
>
  <arcgis-zoom slot="top-left"></arcgis-zoom>
</arcgis-map>

Import components

In your Angular component file (for example app.ts), import the SDK components you use and configure CUSTOM_ELEMENTS_SCHEMA so Angular can render non-Angular elements.

This registers the components with the browser. When your template renders a tag like <arcgis-map></arcgis-map>, the browser creates an instance of that component and enables its functionality.

import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { RouterOutlet } from "@angular/router";

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

@Component({
  selector: "app-root",
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: "./app.html",
  schemas: [CUSTOM_ELEMENTS_SCHEMA], // Set the schema here
})
export class AppComponent {
  arcgisViewReadyChange(event: CustomEvent) {
    // The view is ready, add additional functionality below
  }
}

Refer to the SDK’s Angular template project for a complete example that shows how to work with both components and the core API and set up CSS.