I'm trying to extend the prototype of the HTMLElement object in main.ts, so that I can use it throughout my whole Angular 6 project.

But I get the Property 'fadeOut' does not exist on type 'HTMLElement'.

HTMLElement.prototype.fadeOut = function(duration: number = 300): Promise<void> {
  const keyframes: AnimationKeyFrame[] = [{ opacity: 1 }, { opacity: 0 }];
  return new Promise(resolve => {
    const animation: Animation = this.animate(keyframes, duration);
    animation.onfinish = () => resolve();
  });
};

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);

#circle {
  height: 100px;
  width: 100px;
  margin: 50px;
  border-radius: 50%;
  background-color: #0f477f;
 }
 

<div id="circle"></>

I'm trying to extend the prototype of the HTMLElement object in main.ts, so that I can use it throughout my whole Angular 6 project.

But I get the Property 'fadeOut' does not exist on type 'HTMLElement'.

HTMLElement.prototype.fadeOut = function(duration: number = 300): Promise<void> {
  const keyframes: AnimationKeyFrame[] = [{ opacity: 1 }, { opacity: 0 }];
  return new Promise(resolve => {
    const animation: Animation = this.animate(keyframes, duration);
    animation.onfinish = () => resolve();
  });
};

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);

#circle {
  height: 100px;
  width: 100px;
  margin: 50px;
  border-radius: 50%;
  background-color: #0f477f;
 }
 

<div id="circle"></>

What am I doing wrong?

Where do I need to put this code so that can I make this method available everywhere?

Do you also see a possibility to make this code cleaner?

• javascript
• angular
• typescript

Share Improve this question Follow edited Aug 3, 2018 at 21:04 Kode Bryant asked Aug 3, 2018 at 20:44 Kode BryantKode Bryant 51199 silver badges2424 bronze badges 8

• Maybe HTMLElement.prototype['fadeOut'] works. – Christian Benseler Commented Aug 3, 2018 at 20:46
• If that worked then what the OP tried would work too. – Pointy Commented Aug 3, 2018 at 20:49
• What exactly does the code that attempts to use the method look like? – Pointy Commented Aug 3, 2018 at 20:50
• Once you get the prototype thing figured out, I think your function can just be: function(duration: number = 300) { return this.animate([{opacity:1},{opacity:0}], duration).finished; } – user21926 Commented Aug 3, 2018 at 20:52
• I've just added a snippet, so the code works. @SeanBright You're right! Gotta dive deeper into this amazing API. Thanks! – Kode Bryant Commented Aug 3, 2018 at 20:59

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 9

You need to add a definition to be merged with the original interface in which you define the extra function to be added to HTMLElement

interface HTMLElement {
    fadeOut(duration: number): Promise<void>
}

// Will now work 
HTMLElement.prototype.fadeOut = function (duration: number = 300): Promise<void> {
    const keyframes: AnimationKeyFrame[] = [{ opacity: 1 }, { opacity: 0 }];
    return new Promise(resolve => {
        const animation: Animation = this.animate(keyframes, duration);
        animation.onfinish = () => resolve();
    });
};

If the code is in a module you need to declare the interface in the global namespace

declare global {
    interface HTMLElement {
        fadeOut(duration: number): Promise<void>
    }

}
HTMLElement.prototype.fadeOut = function (duration: number = 300): Promise<void> {
    const keyframes: AnimationKeyFrame[] = [{ opacity: 1 }, { opacity: 0 }];
    return new Promise(resolve => {
        const animation: Animation = this.animate(keyframes, duration);
        animation.onfinish = () => resolve();
    });
};


export var x;