I have an issue on Microsoft Edge where I have a page with a read only state for a form and a pencil edit button that just toggles a boolean in the component and that boolean is used on two divs to toggle which one is displayed using ngIf.
This works fine in chrome but not in IE. There are no errors in the console and even if I log the boolean as it is changed it logs the change.
I have seen several other posts with similar issues and it all seems to have to do with the click event going out of the angular zone for some reason.
With that being said I found out that I can do:
toggleEdit(event?): void {
if (event) {
event.preventDefault();
}
this.ngZone.run(() => {
this.isEditable = !this.isEditable;
});
}
That works on Edge and the divs toggle back and forth, BUT what I want to know is what is actually causing the click to go outside of the angular zone so that I can fix the actual issue.
Here is more of the actual code:
Personal Info Component
@Component({
selector: 'personal-info',
template: require('./personal_info.component.html'),
styles: [require('./personal_info.component.scss')]
})
export class PersonalInfoComponent implements OnInit {
isEditable: boolean = false;
ngOnInit: void {
...
}
toggleEdit(event?): void {
if (event) {
event.preventDefault();
}
this.isEditable = !this.isEditable;
}
}
Personal Info HTML
<div class='read-only container' *ngIf='!isEditable'>
<h2>Personal Information <a href (click)='toggleEdit($event)'><img class='pencil' src='/images/legal-purple.png'/></a></h2>
...
</div>
<div class='editable container' *ngIf='isEditable'>
...
</div>
Profile Component HTML
<h1>Your Profile</h1>
<personal-info></personal-info>
I am using angular at version 4.1.3 and zone at 0.8.10.
These are the current shims we are using:
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/promise';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/es6/weak-map';
import 'core-js/es6/weak-set';
import 'core-js/es6/typed';
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
import 'ts-helpers';