5

I am using Angular 2 google map one of our application. We are loading marker every 5 secs using Sockets. The problem is need to remove previous marker when new marker receive from socket. There is no proper documents in Angular map official site. So thought of destroy components from our app components. And we got all the child components find the following code.

import { Component, OnInit, ViewChild, ViewChildren, QueryList } from '@angular/core';
import { Socket } from 'ng2-socket-io';
import { Marker } from './google-map';
import { SebmGoogleMapMarker } from 'angular2-google-maps/core';

@Component({
  selector: 'app-google-map',
  templateUrl: './google-map.component.html',
  styleUrls: ['./google-map.component.scss'],
  providers: [SebmGoogleMapMarker]
})
export class GoogleMapComponent implements OnInit {
  public lat: number = 51.678418;
  public lng: number = 7.809007;
  public markers: Marker[] = [];
  @ViewChildren(SebmGoogleMapMarker) SebmGoogleMapMarkers: QueryList<SebmGoogleMapMarker>;
  constructor(private socket: Socket) { }

  ngOnInit() {
    this.socket.on('markers', this.setMarkers);
  }

  setMarkers = (data: Marker[]) => {
    this.removeMarkers();
    for (let marker of data) {
      var model = new Marker(marker);
      this.markers.push(model);
    }
  }

  removeMarkers() {
    if (this.SebmGoogleMapMarkers.length > 0) { 
      this.SebmGoogleMapMarkers.forEach((ele) => {
        ele.ngOnDestroy();
      });
    }
  }
}
<div class="col-lg-12">
  <sebm-google-map [latitude]="lat" [longitude]="lng">
    <sebm-google-map-marker *ngFor="let marker of markers" [latitude]="marker.latitude" [longitude]="marker.longitude">
    </sebm-google-map-marker>
  </sebm-google-map>
</div>

We got all child components but still reference are there SebmGoogleMapMarkers query list. Is there anyway to destroy component angular way?

Actually here my concern is this.SebmGoogleMapMarkers.length is increasing every 5 sec. what i am feeling is application performance will be reduce.

Solution: I made silly mistake forgot to make marker array empty before pushing.

shammelburg
  • 6,974
  • 7
  • 26
  • 34
Kesavan R
  • 649
  • 1
  • 5
  • 23

1 Answers1

1

As far as I know there is no way to destroy a component that was not dynamically added. You can use *ngIf to remove a component though:

<sebm-google-map-markers *ngIf="show">

You can also create your own *ngIf variant that for example includes the logic to remove the component when not needed anymore. Creating such a structural directive is quite simple (https://angular.io/docs/ts/latest/guide/structural-directives.html)

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Actually ele.ngOnDestroy(); this is removing marker from markers. My concern is this.SebmGoogleMapMarkers.length is increasing every 5 sec – Kesavan R May 13 '17 at 15:32
  • `ngOnDestroy()` is not supposed to be called by your code. Obviously the component won't be destroyed properly. Perhaps using `*ngFor` to create your `SebmGoogleMapMarker` components is the way to go. You just need to update the array `*ngFor` iterates over and the components associated with an item in the array will be removed when the item in the array is removed. – Günter Zöchbauer May 13 '17 at 15:35
  • yes i should not call ngOnDestroy() from my code. for your referenc added html . thank for your response. – Kesavan R May 13 '17 at 15:40
  • I see. So updating the `markers` array should be the way to go. – Günter Zöchbauer May 13 '17 at 15:41