Get started with the map components Angular template
For more information, visit web components via npm
Each component package offers an additional Angular-friendly package.
The Angular version of a component package is the recommended way to use web components in an Angular application.
The benefit of this approach 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.
Lazy loading components
The components must be lazy loaded in Angular.
This is done by calling define in the n 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.
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.29/assets" });
}
}Next, add Component to the imports of your Angular component's module.
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.
<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>