title: Define a custom Observable in Angular2+
body: <p>I have a simple <a href="https://www.npmjs.com/package/ng-load-animation" rel="nofollow noreferrer">css animation</a> library that allows the display of an animation by calling <code>loadService.animate(boolean);</code> but sadly it does not function anymore as I have been wrongly using an <code>EventEmitter</code> in my service like such:</p>
  
  <pre><code>@Injectable()
  export class LoadService {
      @Output() animating: EventEmitter&lt;any&gt; = new EventEmitter();
  
      constructor() {}
  
      // User calls animate, we emit an event with the new boolean value
      public animate(val: boolean) {
          this.animating.emit(val);
      }
  
      getValue(): any {
          return this.animating;
      }
  }
  </code></pre>
  
  <p>And subscribing to it in my component:</p>
  
  <pre><code>// Animation shown when animate == true
  animate: boolean;
  
  ngOnInit(): void {
      this.loadService.getValue().subscribe((status: boolean) =&gt; {
          // Events caught, we change the boolean to display the animation
          this.animate = status;
      });
      this.handleShape();
  }
  </code></pre>
  
  <p>But my subscription never catches anything, so I figured I wanted to <strong>create a custom <code>Observable</code></strong> in order to simply catch when a user calls <code>animate</code> and consequently change the value of my boolean.</p>
  
  <p>How may I define a custom observable in Angular2+? And how may I implement it in this scenario?</p>