make ngOnChange fired when BehaviorSubject emit true value twice

0
votes

I am working on an Angular 5 app. I have a dropdown component ( which has the following code in the html file, dropdown.component.html

<p-dropdown [options]="data" [(ngModel)]="selectedFilterValue" placeholder="Please Select" [style]="{width: '100%'}" (onChange)="selectedValueChanged($event)"></p-dropdown>

dropdown.component.tc

export class DropdownComponent implements OnInit, OnChanges {

  constructor() { }

  @Input() ddOptions: string[] = [];
  @Input() filterName: string;
  @Input() clearDropDown: boolean = false;

I am using this dropdown component in my parent base where I am displaying 3 dropdowns, code looks as below, parent.component.html

<div class="container">
  <div class="row">
      <div class="col-4">
      <div class="d-flex flex-row align-items-center">
        <span class="col-xs-auto">PBG:</span>
        <arcm-dropdown class="col" [ddOptions]="pbgFilterValues" [clearDropDown]="clearDropdownObservable | async" (filterValue)="selectedValueChanged($event,FilterName.PBG)"></arcm-dropdown>
      </div>
    </div>
    <div class="col-4">
      <div class="d-flex flex-row align-items-center">
        <span class="col-xs-auto">Wafer Size:</span>
        <arcm-dropdown class="col" [ddOptions]="waferSizeFilterValues" [clearDropDown]="clearDropdownObservable | async" (filterValue)="selectedValueChanged($event,FilterName.WaferSize)"></arcm-dropdown>
      </div>
    </div>

parent.component.ts

clearFilters(e:any):void{
     this.clearDropdownSubject.next(true);
  }

Now I have a button on the parent page called "clear filter" and on click of that button, I am emitting an value from my BehaviorSubject as true. This value is being subscricbed by the child dropdown component. The problem is: First time when I emit value as "true", than child component ( dropdown component) ngOnChanges get fired but when I emit the same value again , ngOnchang does not fired and I know why. what should I do in this situation.

I thought of emitting random nummber instead of boolean but than random number can be same sometimes and that will make my "clear filter" button not to function.

2
angularrxjs
If you want a unique value you can emitnew Date().getTime(). - Nour

2 Answers

1
votes

I recently ran into the same issue. So, instead of pushing a primitive boolean to the BehaviorSubject stream, I used an object. For example, in your code, define an interface like this:

export interface Clear {
  clear: Boolean;
}

Then, change your parent component to this:

clearDropdownSubject$: BehaviorSubject<Clear> = new BehaviorSubject({clear: false});
.
.
.
clearFilters(e:any):void{
    this.clearDropdownSubject.next({clear: true});
}

Finally, in your DropdownComponent:

@Input() clearDropDown: Clear = {clear: false};

And update your code accordingly.

0
votes

This is how, I solved it for now, until get a better way,

clearFilters(e: any): void {

    let num: number = this.getRandomNumber();
    if (num > 0 && num != this.clearDropdownSubject.getValue()) {
      this.clearDropdownSubject.next(num);
      this.filterInputList = [];
    }
    else {
      this.clearFilters(0);
    }
  }


  getRandomNumber(): number {
    let randomNumber: number = 0;
    return Math.floor(Math.random() * (100 - 1 + 1)) + 1;
  }