feat(observe-content): add debounce option and other improvements

[crisbeto]

• Adds the ability to debounce the changes from the cdkObserveContent directive.
• Makes the cdkObserveContent directive pass back the MutationRecord to the EventEmitter.
• Fires the callback once per mutation event, instead of once per MutationRecord.

Relates to #2372.

[crisbeto]

@jelbourn I added the MutationObserver to the providers in order to be able to stub it in the unit tests. I'm not sure whether this is the best way to do it, though.

In particular, this line felt a little weird, but TS was complaining if I tried to inject the usual way and use it as a constructor. Something like new (this._mutationObserver as any)(callback) worked as well, although it also felt kind of hacky.

[jelbourn]

Doesn't rxjs have a debounce operator already?

[crisbeto]

It's been a while since I submitted this PR, but IIRC we can't really use it here because the callback is exposed through an EventEmitter which is consumed through the template; <div (cdkObserveContent)="someCallback()">. Technically we could debounce it with Rxjs inside the consumer, but that would make it really inconvenient (we'd need another observable that just proxies this one).

Another alternative for debouncing it through Rxjs could be to have an exportAs for the ObserveContent directive and using a ViewChild to access the EventEmitter directly, but that might look weird as well.

[jelbourn]

You should be able to do something like

private _event = new EventEmitter<void>();

@Output('cdkObserveContent') 
get event(): Observable<void> {
  return this.debounce ? 
      this._event.asObservable().debounceTime(this.debounce) :
      this._event.asObservable();
}

[crisbeto]

That didn't seem to work, but I managed to work around it. Can you take another look at some point?

[jelbourn]

@crisbeto looks like just some minor CI failures

[crisbeto]

@jelbourn can you take another look at this? The CI issues ended up being slightly more complicated, because of the MutationObserver stub and AoT, but I got it working.

[jelbourn]

LGTM, one minor comment

[jelbourn]

Can we conditionally add debounceTime to the chain if debounce !== 0? Andrew noticed when working on the scroll dispatcher that auditTime incurred a cost even when it was set to zero.

[crisbeto]

Done. Also rebased and fixed the fact the debouncer wasn't being completed.

[angular-automatic-lock-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.}