Angular 2 doesn't recognize DOM change

Question

I using some angular 2 components in my project, and I need to change some of component's position. I use DOM to change the position first, like replaceChild or insertBefore, something like that. But I notice that angular 2 doesn't know the DOM change, seems like my DOM change is over the angular 2 life cycle. So, is there any way I can edit DOM in angular2 ? or some way I can change the order of components?

For you can understand what I'm doing, I'm building some components and I want to drag them and switch their position. I find a plug-in write in JQuery, you can find a gif on its GitHub site (https://github.com/Barrior/DDSort/blob/master/img/ddsort.gif). I want to implement something like that gif.

I find something maybe help on GitHub, but I don't know how to use it. https://github.com/angular/angular/blob/master/modules/angular2/src/core/linker/view_manager.ts

@Dan, I'm using angular2. It's a mistake I use angular tag. Sorry. — Lolo.

birwin birwin · Accepted Answer · 2017-05-16T21:42:04

I realize this was asked a while ago, but for others that might be struggling with something like this... Angular uses zones which I believe monkey-patch asynchronous JavaScript operations.

To trigger DOM updates that might not otherwise be picked up by Angular, you can run your with zones...

import { NgZone } from '@angular/core';

@Injectable()
export class SomeService {

    constructor(private zone: NgZone) {}

    someFunction() {
        this.zone.run(() => {
            // Your code goes here!
        });
    }

}

Take a look at this blog on zones

Angular 2 doesn't recognize DOM change

2 Answers