Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 17:08
    tmair opened #6098
  • 13:18
    cartant closed #5609
  • 13:18
    cartant commented #5609
  • 12:48
    cartant commented #5917
  • 12:46
    cartant labeled #5917
  • 08:03
    spierala commented #4740
  • 07:42
    cartant synchronize #6097
  • 07:37
    cartant review_requested #6097
  • 07:37
    cartant opened #6097
  • 06:54
    cartant review_requested #6096
  • 06:54
    cartant opened #6096
  • 06:40
    cartant edited #6095
  • 06:28
    cartant review_requested #6095
  • 06:28
    cartant opened #6095
  • 05:06
    cartant commented #6072
  • 05:06
    cartant commented #6072
  • Mar 06 22:25
    spierala commented #4740
  • Mar 06 19:26
    calebboyd synchronize #6043
  • Mar 06 12:15
    cartant edited #6081
  • Mar 06 12:14
    cartant edited #6085
jcapil-ictdu
@jcapil-ictdu
This message was deleted
1 reply
Dorus
@Dorus
@freshdev1 The idea behind RxJs is that you have immutable event sources that you can reuse. You can still build any program you want, you just create new objects instead of modifying the existing ones. This means you map from an immutable source to a new immutable source. This avoids problems once you start multiplexing your sources, and makes your code more reusable. For your current program it probably wont make any difference, but by taking up this style you avoid problems down the road where you might be doing these things.
freshdev1
@freshdev1
@Dorus thanks for the clarification, will keep it noted from now on.
freshdev1
@freshdev1
Guys I have a scenario where I want to read 2 values from Queryparams observable in Angular.
I want to merge them and subscribe so that I get both values in 1 subscribe and then make a call to a webservice
I read merge and combine latest. but both only emits 1 latest value per observable
do you guys know if their is any way of achieving this?
//set id if present
    this.route.queryParams
    .pipe(
      map(param => param['id'])
    )
    .subscribe(paramValue => {
      this.contractId = paramValue;
    });
The same way I need to check for applicationId
but the expectation is to subscribe an observable which gives me the values of both of them collectively like:
var idQueryParamObs =   this.route.queryParams
    .pipe(
      filter(param => param['id'] != null),
      map(param => param['id'])
    );

var applicationIdQueryParamObs = this.route.queryParams
   .pipe(
      filter(param => param[applicationId'] != null),
      map(param => param['applicationId'])
   );
now how to combine and subscribe them?
Daniel Willis
@danww
freshdev1
@freshdev1
@danww first example doesn't describe the problem I mentioned. May be you pasted a wrong URL. :)
The second doesn't run. It keeps showing Connecting to dev server at the bottom after I hit Run this project button.
Daniel Willis
@danww
@freshdev1 Sorry - yes, that was something else; my bad. Here it is: https://stackblitz.com/edit/angular-ivy-zravkz?file=src%2Fapp%2Fapp.component.ts
freshdev1
@freshdev1
Awesome. Integrating it. :smile:
You're a champ. :P
freshdev1
@freshdev1
@danww can you explain a little about why you did not filter in the start and then later filtered out the id and appid?
ngOnInit() {
    this.id$ = this.route.queryParams.pipe(map(params => params.id)); //<---- why no filter here
    this.applicationId$ = this.route.queryParams.pipe(
      filter(params => !!params.appId),                                                                      //<----- but here any intended purpose of this?  
      map(params => params.appId)
    );
    const combinedIds$ = combineLatest([
      this.id$.pipe(filter((id: string) => id !== null)),                                               // and then here
      this.applicationId$.pipe(
        filter((applicationId: string) => applicationId !== null)
      )
    ]);

    this.result$ = combinedIds$.pipe(
      map(([id, applicationId]: [string, string]) => ({
        id,
        applicationId
      }))
    );

    this.result$.subscribe(result => {
      console.log({ result });
    });
  }
}
additionally if you can also explain me to integrate switchMap with this, it would be great. what is a Project function it expects. I am never able to implement it.
    //set id if present
    var idParam = this.route.queryParams
    .pipe(
      filter(params => !!params.id),
      map(params => params.id)
    );

    var applicationParam = this.route.queryParams
    .pipe(
      filter(params => !!params.applicationId),
      map(params => params.applicationId)
    );

    const combined = combineLatest([
      idParam.pipe(filter((id: string) => id !== null)),
      applicationParam.pipe(
        filter((applicationId: string) => applicationId !== null)
      )
    ]).pipe(
      map(([id, applicationId] : [string, string]) => ({
        id,
        applicationId
      }))
    );

    var result = combined.pipe(
      switchMap(result => {

      })
    );

    result.subscribe((contract: TenantContract) => {

    });
I am getting an error in switchMap clause.
freshdev1
@freshdev1
Ok it works as expected. Got it done.
freshdev1
@freshdev1
Thank you for taking out time and suggesting a solution.
Daniel Willis
@danww
@freshdev1 Sorry, I wasn't very consistent with the filters. I guess they should be applied at the earliest opportunity. What are you wanting to do with the switchMap?
freshdev1
@freshdev1
i made a call to the backend to fetch the information based on ID / Application Id which ever is available
I removed the filters altogether. as I wanted them to be null, since one of them or both could be null. in case both are null, I don't make a call, but in other cases I do.
freshdev1
@freshdev1
after I write down the message to you, I realized, its not working if anyone of them is null. :(
Rafael Avaria Gutierrez
@makenoisewacamayo
Hi i got a question regarding piece of code i have, i would like to use concatMap.
this.apiService .getVigencia() .pipe( tap(() => this.getUserSuscriptions()), filter(res => res.vigenciaIva != true) ) .subscribe(
Rafael Avaria Gutierrez
@makenoisewacamayo
 this.apiService
      .getVigencia()
      .pipe(
        tap(() => this.getUserSuscriptions()),
        filter(res => res.vigenciaIva != true)
      )
      .subscribe( // do something)
.......
// the function getUserSubcription() is his own best

getUserSuscriptions() {
    this.apiService
      .getStatus(requestData, this.userRut)
      .pipe(
        tap(res => {
          this.showError =
            Array.isArray(res.servicios) && res.servicios.length === 0;
        }),
        filter(() => this.showError === false)
      )
      .subscribe(
       // process the everything
      )
This is legacy code, but i would like to change using concatMap to call in sequence . I having issues with this for some weird cases.
any help will be aprecciated
SAGO
@SAGOlab
@makenoisewacamayo something like:
this.apiService.getVigencia().pipe(
    mergeMap( data => this.apiService.getStatus( requestData, this.userRut ) )
    .pipe(
        filter( res => res.vigenciaIva !== true ),
        map( res => ( [data, res] )
).subscribe(
        finalData => {
            console.log(finalData);
        },
      error => {
        this.showError = error
      }
);
SAGO
@SAGOlab

Hi there, I have this three methods:

getDateRange($event) {
    this.dateRange = $event.range;
  }

  getMembers($event) {
    this.highlightMembers = $event.selectedMembers;
  }

  isChecked($event) {
    reurn this.statusSelected.concat(this.prioritySelected)
  }

I need to create an array from combination of all of this events, because at last I need to send an eventEmitter that contains this array created dynamically from those events, there is a way to do this with rxjs?

SAGO
@SAGOlab
no one?
Daniel Willis
@danww
@SAGOlab Something like this:?
someEventEmitter.emit([
  $event.range,
  $event.selectedMembers,
  this.statusSelected.concat(this.prioritySelected),
]);

@SAGOlab Although I'd create a type definition for the object:

export interface EmitterType {
  range: string; // or number or whatever
  selectedMembers: Member[];
  isChecked: boolean;
}

...

@Output someEventEmitter: EventEmitter<EmitterType> = new EventEmitter<EmitterType>();

...

someEventEmitter.emit({range: $event.range,
  selectedMembers :$event.selectedMembers,
  isChecked: this.statusSelected.concat(this.prioritySelected),
});

...assuming I've correctly understood what you're asking.

SAGO
@SAGOlab
@danww but $event.range, $event.selectedMEmbers and this.statusSelected.concat(this.prioritySelected) are three different $event and if I try to combine them someone always return undefined, instead I wish that would no undefined value...
this was my first attempt:
isChecked($event) {
     if ($event.selectedMembers !== undefined) {
       this.highlightMembers = ;
       this.highlightMembers.forEach(member => this.statusSelected.push(member))
       const withMembers = this.statusSelected.concat(this.prioritySelected);
       this.toggleCheck.emit({$event, optionsChecked: withMembers});  
     }
     else if ($event.range !== undefined) {
       this.dateRange = $event.range;
       this.statusSelected.push(this.dateRange)
       this.highlightMembers.forEach(member => this.statusSelected.push(member))
       const withDate = this.statusSelected.concat(this.prioritySelected);
       this.toggleCheck.emit({$event, optionsChecked: withDate}); 
     }
     else {
       const withoutMembers = this.statusSelected.concat(this.prioritySelected)
      this.toggleCheck.emit({$event, optionsChecked: withoutMembers});
    }
    this.toggleCheck.emit({$event, optionsChecked: b});
Daniel Willis
@danww
@SAGOlab Could you make this.dateRange, this.selectedMembers, and this.prioritySelected into BehaviorSubjects and then listen to them with a combineLatest and fire the EventEmitter whenever one of them fires?
SAGO
@SAGOlab
@danww yes I'm evaluating your same idea...I'm trying to combine the three events with rxjs
So I need an observable that store the different $event in memory and combine them populating a unique array dynamically with or without the checkboxes selected or whatever else
but I'm not in luck yet...I'm trying something but nothing works...
Daniel Willis
@danww
@SAGOlab If you can be bothered putting the concept in a Stackblitz, I can have a play with it.
SAGO
@SAGOlab
can you provide me an example of behaviourSubject or any other kind of Observable
yes I'm trying
wait a moment
Daniel Willis
@danww
k k
SAGO
@SAGOlab
I'don't know how many time I'll sped to make a stackblitz
in the mean while I shared my code:
import { Component, EventEmitter, Output, ViewChild, ViewEncapsulation } from '@angular/core';
import { MatSelectionList } from '@angular/material/list';

@Component({
  selector: 'app-tasks-columns-menu',
  templateUrl: './tasks-columns-menu.component.html',
  styleUrls: ['./tasks-columns-menu.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class TasksColumnsMenuComponent {
  @ViewChild('priority', {static: true}) priority: MatSelectionList;
  @ViewChild('states', {static: true}) states: MatSelectionList;

  prioritySelected: object[] = [];
  statusSelected: object[] = [];
  highlightMembers: object[] = [];
  dateRange: object = [];
  mergeOptionsChecked: object[] = [];
  removable: boolean = true;

  @Output() toggleCheck = new EventEmitter<{$event: any, optionsChecked: object}>();
  @Output() userSelected = new EventEmitter<{$event: any, user: object[]}>();

  statusLabels: object[] = [
    {
      label: 'In attesa',
      status: 'Ready',
      key: 'task-status'
    },
    {
      label: 'Preso in carico',
      status: 'Reserved',
      key: 'task-status'
    },
    {
      label: 'In lavorazione',
      status: 'InProgress',
      key: 'task-status'
    },
    {
      label: 'Sospeso',
      status: 'Suspended',
      key: 'task-status'
    }];

  priorityLabels: object[] = [
    {
      label: 'Bassa',
      priority: [0, 1, 2, 3],
      key: 'task-priority'
    },
    {
      label: 'Media',
      priority: [4, 5, 6, 7],
      key: 'task-priority'
    },
    {
      label: 'Alta',
      priority: [8, 9, 10],
      key: 'task-priority'
    }
  ]  

  constructor() {}

  stopPropagation($event) {
    $event.stopPropagation();
  }

  isChecked($event) {
    if ($event.selectedMembers !== undefined) {
      this.highlightMembers = $event.selectedMembers;
      this.highlightMembers.forEach(member => this.statusSelected.push(member))
      const withMembers = this.statusSelected.concat(this.prioritySelected);
      this.toggleCheck.emit({$event, optionsChecked: withMembers});  
    }
    else if ($event.range !== undefined) {
      this.dateRange = $event.range;
      this.statusSelected.push(this.dateRange)
      this.highlightMembers.forEach(member => this.statusSelected.push(member))
      const withDate = this.statusSelected.concat(this.prioritySelected);
      this.toggleCheck.emit({$event, optionsChecked: withDate}); 
    }
    else {
      const withoutMembers = this.statusSelected.concat(this.prioritySelected)
      this.toggleCheck.emit({$event, optionsChecked: withoutMembers});
    }
  }

  remove($event, member: object): void {
    const index = this.highlightMembers.indexOf(member);

    if (index >= 0) this.highlightMembers.splice(index, 1);

    const removeMembers = this.mergeOptionsChecked.filter(option => option['label'] !== member['label'])

    this.toggleCheck.emit({$event, optionsChecked: removeMembers});
  }
}
this is ts.