HTML element nested in mat-grid-tile cannot be found - angular-material

Question

I try to show a openlayers map in a mat-grid-tile of a mat-grid-list.
Template snippet:
<mat-grid-list cols="3" rowHeight="100px">[...]
<mat-grid-tile
colspan="1"
rowspan="5">
<div
id="map"
class="map">
</div>
</div>
</mat-grid-tile>[...]
</mat-grid-list>
The openlayers map is initialized in the typescript file. Snippet:
import OlTileLayer from 'ol/layer/Tile';
import OlMap from 'ol/Map';
import OlOverlay from 'ol/Overlay';
import * as proj from 'ol/proj';
import OlXYZ from 'ol/source/XYZ';
import OlView from 'ol/View';
import OlFeature from 'ol/Feature';
import OlVectorSource from 'ol/source/Vector';
import OlStyleStyle from 'ol/style/Style';
import OlIconStyle from 'ol/style/Icon';
import OlOsmSource from 'ol/source/OSM';
import OlVectorLayer from 'ol/layer/Vector';
import OlPoint from 'ol/geom/Point';
[...]
map: OlMap;
popup: OlOverlay;
source: OlXYZ;
layer: OlTileLayer;
view: OlView;
olOverlay: OlOverlay;
olFeature: OlFeature;
markerSource: OlVectorSource;
markerStyle: OlStyleStyle;
ngAfterViewInit(): void {
this.setMarkerSource();
this.setMarkerStyle();
this.setMap();
}
private setMap() {
this.map = new OlMap({
target: 'map',
layers: [
new OlTileLayer({
source: new OlOsmSource()
}),
new OlVectorLayer({
source: this.markerSource,
style: this.markerStyle
})
],
view: new OlView({
center: proj.fromLonLat([7.35077565, 49.92363955]),
zoom: 7
})
});
}
private setMarkerSource() {
this.markerSource = new OlVectorSource();
}
private setMarkerStyle() {
this.markerStyle = new OlStyleStyle({
image: new OlIconStyle(
/** #type {olx.style.IconOptions} */ ({
opacity: 0.75,
src: 'path-to-icon.png'
})
)
});
}
The issue is, that the target property cannot be set as the div with the id 'map' cannot be found.
I also tried with document.getElementById('map') but it is null.
First I had the map initialization in ngOnInit(), then I moved it to ngAfterViewInit(). Another approach was to write the div like this:
<div #mapDiv class="map></div>
and to call it in the ts file with:
#ViewChild('mapDiv')
mapDiv: ElementRef;
[...]
this.map = new OlMap({
target: this.mapDiv.nativeElement,
[...]
but it says that this.mapDiv is undefined.
If I set the map div outside the mat-grid-tile/mat-grid-list, it works just fine.
What can I do to place the map inside the mat-grid-tile?
Thanks a lot.

Answer 1

Thank you very much for your comment.
In fact, after stopping and restarting the app, the above code works faultlessly.
No idea what the problem was.