Add feature layer to map component using angular

[PeteVitt]

Hi - I'm working with Javascript maps SDK 4.32 and am attempting to add a feature layer to a map component.  I'm basing my effort on the map component angular sample on github (https://github.com/Esri/jsapi-resources/tree/main/component-samples/map-components/samples/angular)  and this post about adding a feature layer to a map component (https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/map-component-api/td-p/1418711)

Below is the code I'm using. I'm getting an error 'addLayer does not exist on type element'

html:
<arcgis-map item-id="d5dda743788a4b0688fe48f43ae7beb9" (arcgisViewReadyChange)="arcgisViewReadyChange($event)"></arcgis-map>

component:
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import "@arcgis/map-components/components/arcgis-map";
import FeatureLayer from '@arcgis/core/layers/FeatureLayer';

@Component({

  selector: 'app-rd-map2',

  imports: [],

  templateUrl: './rd-map2.component.html',

  styleUrl: './rd-map2.component.css',

  schemas: [CUSTOM_ELEMENTS_SCHEMA]

})

export class RdMap2Component {

  arcgisMap = document.querySelector("arcgis-map");

  featureLayer = new FeatureLayer({

    url:

      "https://www.xyz/MapServer/0",

  });

  ngOnInit() {

    var a = this;

    a.arcgisMap.addEventListener("arcgisViewReadyChange", () => {

      a.arcgisMap.addLayer(this.featureLayer);//==> error occurs here addLayer does not exist on type element

    });

  }

}

any ideas how to get a reference to the map component so the feature layer can be added?

Thanks

Pete

[PeteVitt]

I've made a little progress.  I can see the arcgis-map component properties from the event.target (see attached console screen shot)

  arcgisViewReadyChange(event: any) {

    var map = event.target;

    console.log(map);

  }

Can I type my map variable to ArcgisMap from this import statement?

import { ArcgisMap } from "@arcgis/map-components/dist/components/arcgis-map";

I've been trying to do that like this:

  var map:ArcgisMap = new ArcgisMap();  

  map = event.target;

but I'm getting a kind of ugly typescript an error: TS2304: cannot find name 'WeakRef'

[ReneRubalcava · Accepted solution]

Here is a sample Angular app that adds a layer and more. You don't instantiate components, just declare them via html elements.

https://github.com/odoe/map-components-angular/blob/main/src/app/components/map/map.component.ts

[PeteVitt]

Thanks Rene - got the feature layer added.

Pete

[PeteVitt]

Got the  error: TS2304: cannot find name 'WeakRef' solved by adding adding ESNext to tsconfig.json

 "lib": [

      "es2018",

      "ESNext",

      "dom"

    ],

new error is

TS2339: Property 'messages' does not exist on type 'ArcgisBasemapGallery'