CODEWITHSUNDEEP
javascriptangularfirebaseangularfire
Mel Pacheco
Mel Pacheco

Reputation: 789

angular toggle switch two way data binding

I'm using ng2-datepicker and ui-switch

the templates look like this

  <ng-datepicker [(ngModel)]="date" />

  <ui-switch [(ngModel)]="enable"></ui-switch>

I have a list of dates in firebase that looks like this

date: [
    {"-23dssfr74y0127yidas": "Wed Jan 10 2018 00:00:00 GMT-0500 (EST)"},
    {"-23dvrbeby012745ffs": "Thu Jan 11 2018 00:00:00 GMT-0500 (EST)"},
     .....

]

I get the dates and loop over them with *ngFor like this

getDatesList(): FirebaseListObservable<any[]> {
  this.dates = this.db.list(this.datePath );
  return this.dates;
 }

<ul class="date-list" >
      <li class='date-item' *ngFor="let date of dates; let i = index;" (click)='select.emit(date)'>{{ date.$value | date:'yMMMMEEEEd' }}</li>
</ul>

I hade a scheduleService with a BehaviorSubject

private dateSource = new BehaviorSubject<string>(new Date(Date.now()).toString());

 selectedDate$ = this.dateSource.asObservable();

in the component, I subscribe to its value like this

this.dateSubscription = this.scheduleService.selectedDate$
.subscribe(date => {
  this.selectedDate = date;
});

when I select a date from the *ngFor list I update the selectedDate$ which the day picker subscribes to, like this

/// in the component 
select(event) {
 this.scheduleService.updateDate(event.$value);
  }

/// in the service
updateDate(date) {
this.dateSource.next(date);

  }

I add or remove a date from the list with these 2 methods.

 addDate(date: any): void  {
    this.dates.push(date)
    .catch(error => this.handleError(error))
  }


removeDate(key: string): void {
    this.dates.remove(key)
      .catch(error => this.handleError(error))
}

essentially the behavior I want is this:

  1. select a day with the date-picker. and have the ui-switch toggle default to on, if the date selected is NOT in the dates: FirebaseListObservable.

  2. off if the date selected IS in the dates: FirebaseListObservable.

  3. and have the ui-switch toggle add or remove it from the list depending on wether its already there or not.

everything works except the last part, I cant seem to create a function to check if the date string exist in the list, and also have the toggle reflect that.

Upvotes: 3

Views: 1382

Answers (1)

user4676340
user4676340

Reputation:

I can't seem to understand your code, maybe not splitted it would have been better.

Anyway, you asked for a function to check if a date exists in the list, so I will write you one : 

findDate(date: string, list: any[]) { // Since your date is in string
  const d = new Date(date).getTime();
  const dates = list.map(_d => new Date(_d).getTime());
  return dates.find(_d => _d === d);
}

This function will ask for a string of a date and a list of dates, and return the date if it is found in it, or return undefined if it isn't found.

Now you can simply use a boolean for the toogle : 

this.enable = this.findDate(this.selectedDate, this.getDatesList()) ? true : false;

Upvotes: 1

Related Questions