I am currently utilizing Angular 2.1.1 for my application.
Situation
Let's consider a scenario where two components are interacting with each other.
The component DeviceSettingsComponent is active and visible to the user. It contains a close button as shown below:
<a class="close" (click)="closeDeviceSettings()">×</a>
The close button handler simply emits an event:
private closeDeviceSettings(): void {
this.sharedService.broadcast('deviceSettingsClosed');
}
The MainComponent is listening to that event:
this.sharedService.on('deviceSettingsClosed', () => this.isDeviceSettingsOpen = false);
In the template of MainComponent:
<div class="main-device-settings" *ngIf="isDeviceSettingsOpen">
<device-settings [device]="openSettingsData.device"></device-settings>
</div>
All seems to be working correctly in Angular 2.1.1.
Issue
Upon updating to Angular 2.2.x, there appears to be a delay of 3-5 seconds between clicking on the close button and the DeviceSettingsComponent being removed from the DOM. No code changes have been made, except for the Angular version update indicated in package.json.
It doesn't seem to be related to the event handling, as the isDeviceSettingsOpen property in MainComponent updates immediately upon clicking the close button. It appears that the change detection process might be somehow delayed.
Any insights into what might be causing this?
Update
I was able to resolve the issue by manually triggering a change detection right after updating my property like so:
constructor(private changeDetectorRef: ChangeDetectorRef) { }
ngOnInit() {
this.sharedService.on('deviceSettingsClosed', () => {
this.isDeviceSettingsOpen = false
this.changeDetectorRef.detectChanges();
});
}
This approach now ensures that the component is promptly removed from the DOM. However, I find this solution not ideal and question why it is needed...