So i have this Component of a from with an @Output event that trigger on submit, as follows:

@Component({
    selector: 'some-ponent',
    templateUrl: './SomeComponent.html'
})
export class SomeComponent{    
    @Input() data: any;
    @Output() onSubmit: EventEmitter<void> = new EventEmitter<void>();

    constructor(private someService: SomeService) {}

    submitForm(): void{
        this.someService.updateBackend(this.data, ()=>{
            this.onSubmit.emit();
        });
    }
}

I'm using an ngFor to create multiple elements of this Component :

<template let-data ngFor [ngForOf]="dataCollection">
    <some-ponent  [data]="data" (onSubmit)="doSomthing()"></some-ponent>
</template>

The last missing part is the service used on submitting:

@Injectable()
export class SomeService{

    constructor() {}

    updateBackend(data: any, callback: () => void): void{
        /*
         * updating the backend
         */.then((result) => {
            const { errors, data } = result;

            if (data) {
                callback();
            }
        })
    }
}

At the beginning of the submitForm() function, the this.onSubmit.observers is an Array containing one observer, like it should be.

As soon as it reaches the callback method, where the this.onSubmit.emit() is invoked, the this.onSubmit.observers is an Array containing ZERO observers.

I'm experiencing two very weird behaviors:

• If i remove the actual calling to update the backend in SomeService.updateBackend it works perfectly fine, and the observers still is an Array containing one observer!
• If i keep the actual calling to the backend BUT not using ngFor and displaying only one <some-element> it also works perfectly fine, keeping one observer in the this.onSubmit.observers within the callback scope!

Any idea what am i doing wrong?

Thanks in advance!

Update:

Thanks to @StevenLuke's ment about logging the ngOnDestroy of SomeComponent I found out that it is being destroyed before the emit.

Actually, the first thing it is doing when the SomeService.updateBackend finishes is Destroying all the instances of this ponent and recreate them!

This is what makes the observers change! Why would that happen?

So i have this Component of a from with an @Output event that trigger on submit, as follows:

@Component({
    selector: 'some-ponent',
    templateUrl: './SomeComponent.html'
})
export class SomeComponent{    
    @Input() data: any;
    @Output() onSubmit: EventEmitter<void> = new EventEmitter<void>();

    constructor(private someService: SomeService) {}

    submitForm(): void{
        this.someService.updateBackend(this.data, ()=>{
            this.onSubmit.emit();
        });
    }
}

I'm using an ngFor to create multiple elements of this Component :

<template let-data ngFor [ngForOf]="dataCollection">
    <some-ponent  [data]="data" (onSubmit)="doSomthing()"></some-ponent>
</template>

The last missing part is the service used on submitting:

@Injectable()
export class SomeService{

    constructor() {}

    updateBackend(data: any, callback: () => void): void{
        /*
         * updating the backend
         */.then((result) => {
            const { errors, data } = result;

            if (data) {
                callback();
            }
        })
    }
}

At the beginning of the submitForm() function, the this.onSubmit.observers is an Array containing one observer, like it should be.

As soon as it reaches the callback method, where the this.onSubmit.emit() is invoked, the this.onSubmit.observers is an Array containing ZERO observers.

I'm experiencing two very weird behaviors:

• If i remove the actual calling to update the backend in SomeService.updateBackend it works perfectly fine, and the observers still is an Array containing one observer!
• If i keep the actual calling to the backend BUT not using ngFor and displaying only one <some-element> it also works perfectly fine, keeping one observer in the this.onSubmit.observers within the callback scope!

Any idea what am i doing wrong?

Thanks in advance!

Update:

Thanks to @StevenLuke's ment about logging the ngOnDestroy of SomeComponent I found out that it is being destroyed before the emit.

Actually, the first thing it is doing when the SomeService.updateBackend finishes is Destroying all the instances of this ponent and recreate them!

This is what makes the observers change! Why would that happen?

• javascript
• angular
• ponents
• this
• ngfor

• I would suggest to change title to something that reflects the question. this doesn't change at all. It is the same object. Output event listeners in ngFor do. – Estus Flask Commented Sep 13, 2016 at 14:02
• 1 @GünterZöchbauer Alright, ill try implementing your suggestion and update as soon as I'm done – Kesem David Commented Sep 13, 2016 at 18:12
• 2 When the observable replaces the array *ngFor iterates over, then *ngFor has to update the view to reflect the change in the model. If you only add or remove items then *ngFor also just adds removes the related elements in the DOM. – Günter Zöchbauer Commented Sep 15, 2016 at 14:31
• 1 @GünterZöchbauer And since my doSomething() was actually refetching the data from the backend, it was replacing the bound dataCollection and caused plete reinitializing of the ngFor – Kesem David Commented Sep 15, 2016 at 14:35
• 1 Sorry, I just saw what you changed in your question. Your answer contains that already :D – Günter Zöchbauer Commented Sep 15, 2016 at 14:37

2 Answers 2

If you provide a trackBy function in your *ngFor to identify items in your dataCollection, it will not destroy and init. Your template would be:

<some-ponent *ngFor="let data of dataCollection;trackBy:trackByFunction"
  [data]="data" (onSubmit)="doSomthing()"></some-ponent>

And the trackByFunction would look like:

trackByFunction(index, item) {
    return item ? item.id : undefined;
}

So even though an item in your dataCollection is a fresh object, if its id matches an id in the previous collection, *ngFor will update [data] but not destroy and init the ponent.

Thanks to @GünterZöchbauer ments I found out the case was that the data the ngFor is bound to was being replaced by a new instance as I updated the backend, hence, it rerendered it's child Components causing reinitializing (destory + init) of them, which made the instance of the Component to be overwritten.

In order to solve this issue i had to place the dataCollection in a separate service, getting it for the parent ponent ngOnInit, saving it from causing a rerender of the ngFor, and fetch its data again only after the execution of the Child Components ended

Hope it'll be helpful to somebody!