ngx-mapbox-gl | Angular binding of mapbox-gl-js | Map library

I have an angular application upgraded to 11.

And I do a > ng build --prod

And I see this information:

I'm trying to use ngx-mapbox-gl in an angular 7 app for the first time and am experiencing something strange with the map. I want it to take 100% of the window below the navbar. But for some reason it is taking more than the window size. Notice how I lost the attribution and mapbox logo? I would just like the map to fit into the window and that's it.

Here is the component html:

I'm trying to use ngx-mapbox-gl in an angular 7 app for the first time and am experiencing something strange with the map. I want to display some text and a button on top of the map. I've followed an example to the letter I found on the web, but the div is not displaying. If I comment out the map, the div is there along with the button. With map:

and when map is commented out:

Here is the component html:

I'm trying to get ngx-mapbox-gl to display a map in an angular app, but the map is only displaying in half the div. Have played with multiple settings and html tweaks, but cannot get more than half a map to display. Here is the map.component.html file: