Advanced TypeScript Programming Projects

Adding Bing Maps to the screen

Like we covered previously, we are going to use two components to display the maps. Let's start with the MapViewComponent. The HTML template for this control is really straightforward:

<div #myMap style='width: 100%; height: 100%;'></div> 

Yes, that really is all there is to our HTML. What goes on behind it is a bit more complicated, and this is where we are going to learn how Angular lets us hook into standard DOM events. We normally don't show the whole @Component element because it is pretty much boilerplate code, but in this case, we are going to have to do something a little bit different. Here's the first part of our component:

@Component({  selector: 'atp-map-view',  templateUrl: './map-view.component.html' ...