CODEWITHSUNDEEP
javascriptangularagm-direction
IkePr
IkePr

Reputation: 930

Agm direction panel: Show panel in different component

I have two components that display on one page (first is 70% of the page, the other 30%). One in which the map is and another where I want to show the panel (info on how to get to the destination: turn left, then right, etc.)

enter image description here

I used agm-directions to get the panel - https://robby570.tw/Agm-Direction-Docs/source/featured/direction.html (look at Update Panel With New Query ).

I managed to create it well and, when you click a button the panel will appear with the text, but on the map component, under the map (see picture 2). This is because I put <div #myPanel></div> under the map in the first component.

enter image description here

I want to get that panel text on the second component. I do not know how to do this because I bind the panel in the map component [panel]="myPanel", according to the documentation above.

So is there a way I can transfer that bonded data in a different component ?

Here is the first component html:

<agm-map [zoom]="zoom" [latitude]="lat" [longitude]="lng">
    ...

    <agm-direction
      [origin]="origin" 
      [destination]="destination" 
      [travelMode]="transitOptions" 
      [visible]="show"
      [renderOptions]="renderOptions"
      [markerOptions]="markerOptions"
      [panel]="myPanel" <!-- THIS IS IMPORTANT FOR INFO -->
    >
    </agm-direction>

    ...    
</agm-map>

<div #myPanel></div>

The second component is just some generic html.

TLDR: How can I get <div #myPanel></div> to work in a different component when I bind [panel]="myPanel" in agm-direction.

Upvotes: 0

Views: 599

Answers (1)

IkePr
IkePr

Reputation: 930

Managed to get the value thanks to

@ViewChild("myPanel", {static: false}) myPanel;

Then, in a function that activates when the button is clicked:

let _this = this;
setTimeout(function() {
  console.log(_this.myPanel);
  if(_this.myPanel != undefined){
    let ivan = _this.myPanel;
    console.log("test myPath", ivan);
    //console.log("Test", JSON.stringify(this.myPanel.nativeElement.innerHTML));
    console.log(_this.myPanel.nativeElement.innerHTML); //THIS IS THE ANSWER
  }
}, 500);

Upvotes: 0

Related Questions