1

I have a common component [date-range-selector], in this component when the date values are changed it emits the new values as such

@Output() changeEvent = new EventEmitter();
//unimportant code
this.changeEvent.emit({ from: moment(from), to: moment(to) });

Now on my app I have a [Clear Filters] button which resets the date range to default but this is causing the component to fire the changeEvent.emit code again

How can I disable the emitter, change the values then re-enable the emitter or am I going about this the wrong way?

Can I remove my listener from the parent and then re-attach that dynamically?

Here is the component in my filter bar

<so-date-selector class="date-selector"
  #CreationDate
  [from]="fromDate"
  [to]="toDate"
  [allowCalendar]="false"
  [allowRange]="true"
  placeholderText="Creation Date"
  (changeEvent)="creationDateChange($event)"
>
<button mat-stroked-button (click)="resetFilters()" class="clear-filter">Clear Filters</button>

inside so-date-selector I have this

<section *ngIf="allowRange">
  <ngx-mat-drp (selectedDateRangeChanged)="updateRange($event)" [options]="options" #dateRangePicker></ngx-mat-drp>
</section>

updateRange calls the emit function and then in my parent component I have

 resetFilters() {
    this._service.filtersInitialised = false;
    this.sourceFilter.setValue("All Sources");
    this.fromDate = moment(new Date()).subtract(14, 'days').startOf('day');
    this.toDate = moment(new Date()).clone().endOf('day');
    this._service.filtersInitialised = true;
  }

and then in the service

loadIssues() {
    if (this.filtersInitialised) {
//do stuff
}

So none of my other filters fire the event as I check on this._service.filtersInitialised, however the date selector is fired and my guess is because it emits after I have reset my boolean

Hope that makes it a bit clearer

  updateRange(range: Range) {
      this._emit(moment(range.fromDate), moment(range.toDate));
  }

  private _emit(from: moment.Moment, to: moment.Moment) {
    if (this._isInitialised) {
      this.changeEvent.emit({ from: moment(from), to: moment(to) });
    }
  }

So what I had before in the above is this._isInitialised && this.emitEnabled

with emitEnabled being a boolean Input()

then in my consumer I set emitEnabled = false while I reset the date values, then enabled it again but the emit still fired so my thinking is that the child control was running slightly behind the parent so by the time it hit the emit function that boolean was back to true

[Final Update] I think the answer is pretty simple, this cannot be done as it makes no sense. Here is my basic workflow thinking as to why

Okay imagine we have 3 components Parent - Child - Alarm

Parent is listening to child which is listening to alarm

If I set the parent to not listen to the child, then start a timer on the alarm, then start listening to the child again. When the alarm goes off the child will notify the parent because it's listening again. Even though what caused the action happened when the parent was set to not listen

So the problem in my real life scenario is that for some reason is slow and notifies me after I start listening again.

Gavin Mannion
  • 875
  • 1
  • 14
  • 32
  • 2
    is there any reason you want to disable/enable the emitter instead of creating some emitting logic like `if(shouldEmit) this.changeEvent.emit`? – ABOS Mar 19 '19 at 17:00
  • Why don't you check if the string is empty, and not trigger a change in that case – MCMatan Mar 19 '19 at 17:01
  • The string isn't empty, I've reset my date to today so it's a valid date I just don't want to use it right now – Gavin Mannion Mar 19 '19 at 17:07
  • @ABOS, I tried a boolean, but my components emit logic fires slower than my setting of the boolean, clearing fields and then setting it back. My component has another component in it which fires an emitter which I have no control over at all – Gavin Mannion Mar 19 '19 at 17:09
  • @GavinMannion, I don't understand your point. if you know when to disable the emitter, you can also update the boolean at the same time, right? – ABOS Mar 19 '19 at 17:51
  • Can you show the code of `updateRange`? Are you saying that it is called after `resetFilters` has completed? Can you confirm that with `console.log` statements? How is `loadIssues` related to the problem? – ConnorsFan Mar 19 '19 at 18:08
  • @ABOS I think I'm going to have to try replicate this in a stackblitz or something as it's difficult to explain. Or I'm having difficulty explaining. I've added more code and info above as well – Gavin Mannion Mar 20 '19 at 09:19
  • @ConnorsFan loadIssues is the method being called on my service, the one I don't want to call. And yes updateRange is being called after resetFilters has completed. updateRange is called because I updated the property in resetFilters but there seems to be a lag before it fires – Gavin Mannion Mar 20 '19 at 09:20
  • I don't think this is a *solvable* problem, I've added a reason to the main question. It is working as intended and as it should – Gavin Mannion Mar 20 '19 at 09:58

0 Answers0