I have the following code in my ngOnInit:

ngOnInit(): void {
let selectedArea:any = null;
let areas = document.querySelectorAll<SVGElement>('path'); // gets an array of all of the paths in the DOM
areas.forEach((area) => {      // for each svg path
   area.addEventListener('mouseover', function () {
     area.style.fill = '#2100b6'; // add hover
    });
    area.addEventListener('mouseout', function () {
      area.style.fill = ''; // return to default on mouse out
     });
     area.addEventListener('click', function () {
       if (selectedArea) {
         area.style.fill="black";
       }
       if (selectedArea !== area.id) {
         selectedArea = area.id;
         area.setAttribute('class', 'selectedArea'); // changed
         area.style.fill="black";
       }
        console.log(selectedArea);
      });
      this.selectedRegion = selectedArea
    }); 
} 



selectedRegion : number = 0

"selectedArea" logs the selected region's code from an SVG map. I tried to get that into the new variable "selectedRegion", but it did not work.

So, I want to use "selectedArea" outside of ngOninit, but I don't have any idea, how to do it.