<div (click)="handler()"> does not work in edge, but works in IE11 and other browsers

I have an angular 5.2.8 app. It contains a bit of code:

  <div class="login-box">
    <div (click)="toggleMenu()">
      <span class="loginShortTitle">
        <i class="fa fa-user-circle"></i> Login</span>
    <div [hidden]="!menuIsOpen">
      <form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm)">
        <input type="text" name="username" ngModel>
        <input type="password" name="password" ngModel>
        <input type="submit" value="Login">

the component has:

public toggleMenu() {
   this.menuIsOpen = !this.menuIsOpen;

In firefox, chrome and IE 11, clicking the top div will show the login form. However, in Edge 41 it does not. No errors/warnings show in the console...

I thought it might be a CSS issue, when I inspect the elements using the F12 developer tools in edge and change the CSS for the clickable-div; adding "position: relative;" it suddenly DOES become clickable. Even though the developer toolbar shows a strikethrough effect on the position: relative part as if it's being ignored. Removing the property still makes it remain clickable.

The CSS:

.login-box {
  float: right;
  top: 0px;
  right: 0px;
  display: block;
  min-width: 12em;
.loginShortTitle {
  padding: 1ex 1ex;
  margin: auto 0;
  display: block;

I'm stumped... does anyone have a clue what's going on ?

--- edit: I modified my toggleMenu() function to:

public toggleMenu() {
   this.menuIsOpen = !this.menuIsOpen;
   window.console.log('clicked toggleMenu');
   window.console.log('Value of this.menuIsOpen=' + (this.menuIsOpen ? 'True' : 'False'));

and it logs all clicks, even in Edge. The values are as expected. However, nothing happens in the CSS/HTML beyond this point.

As per request, the full component:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AuthenticationService } from '../auth/authentication.service';

  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
export class LoginComponent implements OnInit {
  public menuIsOpen = false;

    public auth: AuthenticationService,
    public route: ActivatedRoute,
    public router: Router
  ) { }

  ngOnInit() {

  onSubmit(f) {
    const username = f.value.username;
    const password = f.value.password;

    this.auth.login(username, password).subscribe(
      success => {
      error => {

  openMenu(): void {
    this.menuIsOpen = true;
  closeMenu(): void {
    this.menuIsOpen = false;
  toggleMenu(): void {
    this.menuIsOpen = !this.menuIsOpen;

  logout() {
    this.menuIsOpen = false;

1 answer

  • answered 2018-03-13 20:31 Tularis

    Apparently the problem was in the [hidden]="!menuIsOpen" part. In Edge it would not show the element. Switching it to *ngIf="menuIsOpen" dixes the problem.