title: Remove Event Listener for Typescript does not work
body: <p>I tried <code>import { SMS } from '@ionic-native/sms';</code> in my ionic 3 chat application. But <code>document.removeEventListener('onSMSArrive');</code> is not working.</p>
  
  <p>here are the packages that I am using</p>
  
  <pre><code>"@ionic-native/sms": "^4.3.0",
  "@ionic-native/core": "^4.3.0",
  "cordova-sms-plugin": "^0.1.11",
  </code></pre>
  
  <p>The problem is when I come to my page 1st time it perfectly working and receives messages when I got SMS to the phone. <strong>But if I went back to another page and come back to the page I receives the same message twice in my function.</strong> I think event listener is not removing and when I navigate again to the page another listener is adding to the document.</p>
  
  <p>Here is my code</p>
  
  <p>I add event listener when page loads and I remove it when the page unloads.</p>
  
  <pre><code>public ionViewWillEnter() {
      this.smsService.startMessageListner();
  }
  
  public ionViewWillLeave() {
      this.smsService.stopMessageListner();
  }
  </code></pre>
  
  <p>Here is the <code>startMessageListner()</code> and <code>stopMessageListner()</code> functions in my service.</p>
  
  <pre><code>public startMessageListner()
  {
      --- some works do here ---
      this.startListner();
  }
  
  public startListner()
  {
      this.recieveMessage().then((message) =&gt; {
          --- receives message here and when after 
              navigating multiple times I receives 
              multiple same messages here---
      }
  }
  
  public recieveMessage() {
  
      if (!window.SMS) { alert('SMS plugin not ready'); return; }
  
      window.SMS.startWatch(function() {
          console.log('Watching');
      }, function() {
          console.log('Not Watching');
      });
  
      this.promise = new Promise((resolve, reject) =&gt; {
          document.addEventListener('onSMSArrive', this.resolveMessage(resolve));
      });
  
      return this.promise;
  }
  
  public stopMessageListner()
  {
      --- some works do here ---
      this.stopReciveMessage();
  }
  
  public stopReciveMessage()
  {
      // ***This one also not works***
      // document.removeEventListener('onSMSArrive', (event)=&gt;{
      //     window.SMS.stopWatch(function() {
      //         console.log('Stop Watching');
      //     }, function() {
      //         console.log('Not Stop Watching');
      //     });
      // });
  
      document.removeEventListener('onSMSArrive');
  
      window.SMS.stopWatch(function() {
          console.log('Stop Watching');
      }, function() {
          console.log('Not Stop Watching');
      });
  }
  </code></pre>
  
  <p>Please help me to solve this problem. This issue wasted my whole week. And still no luck :(</p>
  
  <p><strong>===Updated with comments===</strong></p>
  
  <p>all given links say that I have to pass exactly same function while removing event listener. In my case, I am passing <code>this.resolveMessage(resolve)</code> with <code>resolve</code> parameter when I am calling <code>document.addEventListener</code>. So I already tried it as follows and still it not solved.</p>
  
  <ol>
  <li><pre><code>public recieveMessage() {
  
      --same content as above--
  
      let self = this; // I added this line for safe side
      this.promise = new Promise((resolve, reject) =&gt; {
          self.resolve = resolve;
          document.addEventListener('onSMSArrive', self.resolveMessage(resolve),false);
      });
  
      return this.promise;
  }
  
  public stopReciveMessage()
  {
      document.removeEventListener('onSMSArrive', this.resolveMessage(this.resolve),false);
  
      window.SMS.stopWatch(function() {
          console.log('Stop Watching');
      }, function() {
          console.log('Not Stop Watching');
      });
  }
  </code></pre></li>
  </ol>
  
  <p>2.
          for same <code>recieveMessage()</code> in 1.</p>
  
  <pre><code>    public stopReciveMessage()
      {
          document.removeEventListener('onSMSArrive', this.resolveMessage,false);
  
          window.SMS.stopWatch(function() {
              console.log('Stop Watching');
          }, function() {
              console.log('Not Stop Watching');
          });
      }   
  </code></pre>
  
  <p>3.
          for same <code>recieveMessage()</code> in 1.</p>
  
  <pre><code>    public stopReciveMessage()
      {
          let self = this;
          this.promise = new Promise((resolve, reject) =&gt; {
              document.removeEventListener('onSMSArrive', self.resolveMessage(resolve),false);
              window.SMS.stopWatch(function() {
                  console.log('Stop Watching');
              }, function() {
                  console.log('Not Stop Watching');
              });
          });
      }
  </code></pre>
  
  <p>4.
          for same <code>recieveMessage()</code> in 1.</p>
  
  <pre><code>    public stopReciveMessage()
      {
          let self = this;
          this.promise = (resolve, reject) =&gt; {
              document.removeEventListener('onSMSArrive', self.resolveMessage(resolve),false);
              window.SMS.stopWatch(function() {
                  console.log('Stop Watching');
              }, function() {
                  console.log('Not Stop Watching');
              });
          };
      }
  </code></pre>
  
  <p>Thanks</p>