How to bind zoom change in OpenLayers in Angular 9

Question

I am searching for some change listener for my openlayers map.

For a not experienced Angular person, I am not sure if I should bind div changes or, the part I do not know how, bind directly map? In that case how can I call my function if there is not any element on which I can set a (change) or (ngModel) or similar?

The map is being created onInit calling this function:

createOpenLayersMap(){
  this.map = new Map({
    target: 'hotel_map',
    layers: [new TileLayer({
      source: new OSM()
    })],
    view: new View({
      center: olProj.fromLonLat([this.lng, this.lat]),
      zoom: 7
    })
  });
  this.crForm = this.fb.group({
  crControl: [1],
  crEndControl: [1]
});
}

The map target is div by id 'hotel_map':

CSS:

#hotel_map {
  height: 100%;
  width: 100%;
 }

HTML:

      <div id="hotel_map" (change)="getZoom()"></div>

Typescript function:

  zoomLevel: any = '';
  getZoom(){
  this.zoomLevel = this.map.getView().getZoom();
  console.log(this.zoomLevel)
  }

Now I need to know the zoom parameters which would use to change circle radius.

For any solutions and advices, thanks in advance!

Answer 1

this.map.getView().on('change:resolution', () => {
    this.zoomLevel = this.map.getView().getZoom();
    console.log(this.zoomLevel)
})

just listen "change:resolution"