Angular 2, how to access DOM element in index.html

Question

H, im trying to get access to the div element that I have created in the DOM (index.html) from my Angular 2 component.

What I what to accomplish: Option 1:

  • 1: Hide a div element when the page loads with jQuery.
  • 2: Show that element again but inside on an Angular 2 component.
  • Problem with option 1:

  • I have no access to elements that have been created inside index.html from an Angular 2 component.
  • Option 2:

  • 1: Load my google maps script when my maps component is loaded.
  • 2: Created the div googleMap inside of my component instead.
  • Problmen with option 2:

  • I cannot/don't know how to load external Javascript from inside of an component.
  • You can tried the whole google maps API by just copy paste the HTML code and run that in a browser, or USE the Run Code snippet functions inside Stackoverflow.

    Here is a minified version at plunker ! =>

    Plunker Version

    Thanks for your patient all and just ask if something is unclear.

    <html>
      <head>
        <base href='/'>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- You will need styles to show the map -->
        <style>
          #googleMap{
            width: 400px;
            height: 400px;
            border: 1px solid green;
          }
        </style>
        <!-- jQuery API -->
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    
        <!-- Google Maps -->
        <!-- Marker cluster api to be able to add many pointers to google maps -->
        <script
          src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
        </script>
    
        <!-- Google maps UI -->
          <script
            async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRkoeyhWeokhDYDzGPJoBExYdVDi9FbzE&callback=initMap">
          </script>
    
        <!--
          This script loads from inside the URL 3 lines above this line
          to trigger and write out our map inside the googleMap div
        -->
        <script>
        function initMap() {
    
          var map = new google.maps.Map(document.getElementById('googleMap'), {
            zoom: 10,
            center: {lat: 57.715567, lng: 11.984026}
          });
    
          // Create an array of alphabetical characters used to label the markers.
          var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    
          // Add some markers to the map.
          // Note: The code uses the JavaScript Array.prototype.map() method to
          // create an array of markers based on a given "locations" array.
          // The map() method here has nothing to do with the Google Maps API.
          var markers = locations.map(function(location, i) {
            return new google.maps.Marker({
              position: location,
              label: labels[i % labels.length]
            });
          });
    
          // Add a marker clusterer to manage the markers.
          var markerCluster = new MarkerClusterer(map, markers,
              {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
        }
        var locations = [
          /******
          **
          ** Sweden cordinates
          **
          ******/
          {lat: 57.683522, lng: 12.002759},
          {lat: 57.700674, lng: 11.974408},
          {lat: 57.681494, lng: 12.003012},
          {lat: 57.678302, lng: 12.005312},
          {lat: 57.656136, lng: 12.016982},
          {lat: 57.656122, lng: 12.019364},
          {lat: 57.649467, lng: 12.002159},
          {lat: 57.646449, lng: 11.996659},
          {lat: 57.641077, lng: 12.009796},
          {lat: 57.612011, lng: 11.929612},
          {lat: 57.709454, lng: 11.704358},
          {lat: 57.715483, lng: 11.782698},
          {lat: 57.716376, lng: 11.778341},
          {lat: 57.701065, lng: 11.913668},
          {lat: 57.701065, lng: 11.913668},
          {lat: 57.706186, lng: 11.937175},
          {lat: 57.707057, lng: 11.939428},
          {lat: 57.705784, lng: 11.941048},
          {lat: 57.705108, lng: 11.938044},
          {lat: 57.706579, lng: 11.936004},
          {lat: 57.705884, lng: 11.936366},
          {lat: 57.705522, lng: 11.939739},
          {lat: 57.713506, lng: 11.948909},
          {lat: 57.732862, lng: 11.955038},
          {lat: 57.788828, lng: 12.022301},
          {lat: 57.797326, lng: 12.051568},
          {lat: 57.739628, lng: 12.134029},
          {lat: 57.703938, lng: 11.967092},
          {lat: 57.705761, lng: 11.969560},
          {lat: 57.709389, lng: 11.967522}
        ];
        </script>
    
        <!-- Added hide and show buttons temporarly for testing DOM access -->
        <script defer>
          $(document).ready(function(){
              jQuery("#hide").click(function(){
                  $("#googleMap").hide();
              });
              jQuery("#show").click(function(){
                  $("#googleMap").show();
              });
          });
        </script>
    
      </head>
      <!-- 3. Display the application -->
      <body>
    
        <!-- Main app component -->
        <my-app>Main app Loading...</my-app>
    
          <!-- Google maps UI (temp location) -->
          <div #googleMapViewChild id="googleMap"></div>
    
          <button id="hide">Hide Map</button>
          <button id="show">Show Map</button>
    
      </body>
    </html>

    import {  Component, OnInit, Renderer, ContentChild, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
    
    declare var componentHandler: any;
    declare var jQuery:any;
       
    @Component({
      selector: 'maps',
      template: `
         <!-- This is what I want to accomplish and load the map from 
              inside this component, but I dont know how to refresh or 
              load the external Javascript from an component. 
          -->
         <div id="googleMap"></div>
      ´,
      styleUrls: [
          'app/maps/maps.component.css'
      ]
    })


    Show source
    | dom   | html   | angular2   | google-maps   | google-maps-markers   2016-10-21 14:10 1 Answers

    Answers ( 1 )

    1. 2016-10-21 16:10

      I think you'd be better off not mixing angular2 with jQuery. Just put your map into your component and do it the angular way:

      @Componnet({ selector: 'maps', template: '<div> <div #googleMapViewChild id="googleMap" *ngIf="visible"></div> <button (click)="visible=true">show</button> <button (click)="visible=false">hide</button>' }) export class MapsComponent { visible: boolean = true; }

    ◀ Go back