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 ?

My Router config part :

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { OnlineideComponent} from './onlineide/onlineideponent';
import {HomepageComponent} from './homepage/homepageponent';

const routes: Routes = [
  {path: 'ide',component: OnlineideComponent},
  {path: '', component:  HomepageComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

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 ?

My Router config part :

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 { }

• javascript
• node.js
• angular
• typescript
• ecmascript-6

• HOW do you know that the previous instance of the component was present in the DOM? As long as You ain't using some hack like display: none to hide the component from the DOM by including both the component in same parent component and hiding one or other component conditionally. i.e X component will be destroyed and will be recreated if the route is changed from X to Y and from Y to X. Can You create a demo at stackblitz of your problem so that we can debug the issue? – Akshay Rajput Commented May 17, 2019 at 5:26
• This sounds really weird, it should already happen if you've set it up correctly. Can you be more specific about the components in your own code and show how they're set up – ShamPooSham Commented Apr 26, 2021 at 12:17

3 Answers 3

You can use nativeElement.remove() method to physically remove element. So your code should be:

First, make sure to put it in ngOndestroy method

export class YourComponent  {

  constructor(private elementRef: ElementRef) {

  }

  ngOndestroy() {
    this.elementRef.nativeElement.remove();
  }
}

Update:

Since you using router you need to change your router order like this

  {path: '', component:  HomepageComponent }
  {path: 'ide',component: OnlineideComponent},

You can use HostListener and it will remove/clear the component when that page is unloaded.

@HostListener('unloaded')
ngOnDestroy() {
    console.log('Cleared');
}

This is what I did to make it work.

Use routerLink and <router-outlet></router-outlet>. You can do something like this.

<button mat-flat-button color="primary" routerLink="/login">Login</button>
<button mat-flat-button color="primary" routerLink="/signup">Signup</button>

<router-outlet></router-outlet>

Your Components will show in place of <router-outlet></router-outlet> and they will destroy previous component. [Source]

Thoughts: I believe this way of routing is done because of the 'nature' of the Single Page Applications.