title: How to destroy a component when we move to another component in angular 6?
body: <p>In angular 6, let we have three component x,y,z . I am in now at x component. But when I go to component y and return back to x, there is still the previous x component in the DOM. But I want to delete the previous instance of x.That means I want only one intstance of a component at a time in DOM.How to do that ?</p>
  
  <p>My Router config part :</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { OnlineideComponent} from './onlineide/onlineide.component';
  import {HomepageComponent} from './homepage/homepage.component';
  
  const routes: Routes = [
    {path: 'ide',component: OnlineideComponent},
    {path: '', component:  HomepageComponent }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>