Is it possible to destroy a component (not dynamically created)?

Question

I am using Angular 2 google map in one of our applications. We load a token every 5 seconds using Sockets. The problem is the need to remove the previous token when the new token gets from the socket. There are no relevant documents on the official Angular map site. So we thought about destroying the components from our application components. And we got all the child components to 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>

Run codeHide result

We got all the child components, but still refer to the list of SebmGoogleMapMarkers requests. Is there a way to destroy an Angular component?

- . SebmGoogleMapMarkers.length 5 . , .

. , , .

Answer 1

, , . *ngIf :

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

*ngIf, , , , . (https://angular.io/docs/ts/latest/guide/structural-directives.html)