Cant unsubscribe from MediaQueryList using removeListener

Which @angular/* package(s) are the source of the bug?

common

Is this a regression?

No

Description

Cant unsubscribe a listener from the MediaQueryList using removeListener

export const BREAKPOINTS: any = {
  screenKey: 500,
  screenKey2: 600,
};

const mqls: any = {
  screenKey: null,
  screenKey2: null,
};

export class AppComponent implements AfterViewInit {
  ngAfterViewInit() {
    Object.keys(mqls).forEach((key) => {
      mqls[key] = window.matchMedia(`(max-width: ${BREAKPOINTS[key]}px)`);
    });
    this.createListeners();
  }

  listener = () => {
    for (const key in mqls) {
      if (mqls[key].matches) {
        console.log('emitted from method', key);
        break;
      }
    }
  }

  createListeners() {
    Object.keys(mqls).forEach((key) => {
      mqls[key].addListener(this.listener);
    });

    setTimeout(() => {
      this.remove();
    }, 5000);
  }

  remove() {
    Object.keys(mqls).forEach((key) => {
      console.log(mqls[key]);
      mqls[key].removeListener(this.listener);
    });

    console.log('removed all listeners');
  }
}

Please provide a link to a minimal reproduction of the bug

https://github.com/DimaPateuk/media-test

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in

Angular CLI: 12.2.3
Node: v12.20.1
Package Manager: npm 6.14.10
OS: ProductName:    Mac OS X
ProductVersion: 10.14.6
BuildVersion:   18G9216

Anything else?

for the latest version of the Angular removeEventListener works as expected

[dimakuba]

@flash-me seems like it should be addressed to @DimaPateuk 🙃

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}