mapa.addControl(new mapboxgl.NavigationControl()) doesn't on Angular

Question

I'm trying to use the controls in an Angular web app with the 10 version, but I don't know why doesn't work.

import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from "@angular/core";
import * as mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';

@Component({
  selector: "app-mini-map",
  templateUrl: "./mini-map.component.html",
  styleUrls: ["./mini-map.component.sass"],
})
export class MiniMapComponent implements OnInit, AfterViewInit {

  @ViewChild("miniMapa") divmapa!: ElementRef;
  mapa!: mapboxgl.Map;

  constructor() {}

  ngOnInit(): void {

  }

  ngAfterViewInit(): void {
    const mapa = new mapboxgl.Map({
      container: this.divmapa.nativeElement,
      style: "mapbox://styles/mapbox/streets-v11",
      center: [-72.25323448337556, 11.373452774112943],
      zoom: 4,
    });

    mapa.addControl(new mapboxgl.NavigationControl());
  }
}

I have been following the tutorial that is in the official page, and had seen many other examples, but I couldn't yet this working.

Answer 1

You should use this.mapa to access the class variable like so:

ngAfterViewInit(): void {
    this.mapa = new mapboxgl.Map({
    container: this.divmapa.nativeElement,
    style: "mapbox://styles/mapbox/streets-v11",
    center: [-72.25323448337556, 11.373452774112943],
    zoom: 4,
});
    
this.mapa.addControl(new mapboxgl.NavigationControl());
// ^^ "this" is important here!
}