Does elementRef.nativeElement.remove() have any negative effects on the browser?

Question

I'm setting a timeout to destroy a component on Angular 2 that may be destroyed before the timeout is called. The timeout is called either way and it does a .remove() on the native element of the component (even though it is no longer in the dom).

If the element is destroyed and the timeout executes to remove the already destroyed component are there any negative side affects that are not visible?

export class AnimationCloserComponent {
    public queryParams$;

    constructor(
        private router: Router,
        private elementRef:ElementRef,
        private activatedRoute:ActivatedRoute) {}    

    ngOnInit() {
        /* Will look for routing instructions with QueryParams to route and close this component. These instructions may sometimes not be available.. */
        this.queryParams$ = this.activatedRoute
            .queryParamMap 
            .map(params => {
                    let closeOutletName = params.get('closeOutlet') || null;
                    if (closeOutletName != null) {
                        this.router.navigate(['', { outlets: { [closeOutletName]: null }}]);
                    }
                    return params.get('closeOutlet') || null;
                }
            );

        /* This is meant to destroy the component if the router could not route away from it. */
        setTimeout(()=>{
            this.elementRef.nativeElement.remove();
        }, 1500);
    }    
}

I really wanted to ask if just doing this is ok before I make this a practice. (already clarified below)

Answer 1

It is almost never OK to remove native DOM elements without Angular knowing about it. Angular keeps all component related nodes (including child components) in the abstraction called View. Nodes in the view point to DOM elements. Consider the following setup:

ComponentA
   ComponentB

the view hierarchy will be something like this:

ComponentAView
    ElementNode('<b-comp>', document.createElement('<b-comp>'))
        ComponentBView
           ...
    ComponentClassNode(new ComponentB());

If you remove the first element <b-comp> from the DOM Angular knows nothing about it. It will continue thinking that there's a child component available.

This may result in the unexpected consequences like Angular reporting a child component in the @ViewChildren while you have removed it from the DOM.