Get started with Angular and ArcGIS Maps SDK for JavaScript

It is recommended to use the ArcGIS Maps SDK for JavaScript component packages in an Angular application. These packages such as @arcgis/map-components are built on top of @arcgis/core and the SDK uses industry standard web components to handle much of the boilerplate functionality, while ensuring the underlying API remains accessible. The benefit of the Angular-friendly component packages is that you can use the web components as if they were native Angular components, meaning that CUSTOM_ELEMENTS_SCHEMA is not required. In the case of @arcgis/map-components, you'd want to use @arcgis/map-components-angular.

Setup

Install the @arcgis/map-components-angular package:

Use dark colors for code blocksCopy
npm install @arcgis/map-components-angular

Registering components

Loading all components

The components must all be loaded at once in Angular. This is done by calling defineCustomElements in the ngOnInit lifecycle method of the first component to utilize @arcgis/map-components. It only needs to be called once to register all the components with the custom elements registry.

app.component.ts
Use dark colors for code blocksCopy
import { Component, OnInit } from "@angular/core";
import { defineCustomElements } from "@arcgis/map-components/dist/loader";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  title = "map-components-angular-template";

  arcgisViewReadyChange(event: any) {
    console.log("MapView ready", event);
  }

  ngOnInit(): void {
    defineCustomElements(window, { resourcesUrl: "https://js.arcgis.com/map-components/4.30/assets" });
  }
}

Next, add ComponentLibraryModule to the imports of your Angular component's module.

app.module.ts
Use dark colors for code blocksCopy
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ComponentLibraryModule } from '@arcgis/map-components-angular';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ComponentLibraryModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

Now, you can use web components in your application like any other Angular component.

app.component.html
Use dark colors for code blocksCopy
<arcgis-map item-id="d5dda743788a4b0688fe48f43ae7beb9" (arcgisViewReadyChange)="arcgisViewReadyChange($event)">
  <arcgis-expand>
    <arcgis-search position="top-right"></arcgis-search>
  </arcgis-expand>
  <arcgis-legend position="bottom-left"></arcgis-legend>
</arcgis-map>