title: Extend HTMLElement prototype
body: <p>I'm trying to extend the prototype of the HTMLElement object in <code>main.ts</code>, so that I can use it throughout my whole Angular 6 project.</p>
  
  <p>But I get the <code>Property 'fadeOut' does not exist on type 'HTMLElement'</code>.</p>
  
  <pre><code>HTMLElement.prototype.fadeOut = function(duration: number = 300): Promise&lt;void&gt; {
    const keyframes: AnimationKeyFrame[] = [{ opacity: 1 }, { opacity: 0 }];
    return new Promise(resolve =&gt; {
      const animation: Animation = this.animate(keyframes, duration);
      animation.onfinish = () =&gt; resolve();
    });
  };
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const circle = document.getElementById('circle');
  
  HTMLElement.prototype.fadeOut = function(duration = 300) {
    const keyframes = [{ opacity: 1 }, { opacity: 0 }];
    return this.animate(keyframes, duration).finished
  };
  
  circle.fadeOut(2000);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#circle {
    height: 100px;
    width: 100px;
    margin: 50px;
    border-radius: 50%;
    background-color: #0f477f;
   }
   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="circle"&gt;&lt;/&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What am I doing wrong?</p>
  
  <p>Where do I need to put this code so that can I make this method available everywhere?</p>
  
  <p>Do you also see a possibility to make this code cleaner?</p>