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
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.
<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu"
  class="text-right column-menu" disableRipple="true">
  <mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu" (click)="stopPropagation($event);" class="menu">
  <div fxLayout="column" class="menu__wrapper" (click)="stopPropagation($event);">
    <h3>Filtra per</h3>
    <mat-divider></mat-divider>
    <p>STATO</p>
    <mat-selection-list #states (selectionChange)="isChecked($event)" [(ngModel)]="statusSelected">
      <mat-list-option *ngFor="let state of statusLabels;let i = index" checkboxPosition="before" (click)="stopPropagation($event);" [value]="state">
        {{ state['label'] }}
      </mat-list-option>
    </mat-selection-list>
    <mat-divider></mat-divider>
    <button mat-button [matMenuTriggerFor]="animals" (click)="stopPropagation($event)">Utente <mat-icon>double_arrow</mat-icon></button>
    <mat-chip
      *ngFor="let member of highlightMembers"
      [selectable]="true"
      [removable]="removable"
      (removed)="remove($event, member)">
      {{ member['label'] }}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
    <mat-divider></mat-divider>
    <p>PRIORITÀ</p>
    <mat-selection-list #priority (selectionChange)="isChecked($event)" [(ngModel)]="prioritySelected">
      <mat-list-option *ngFor="let label of priorityLabels;let i = index" checkboxPosition="before" (click)="stopPropagation($event);" [value]="label">
        {{ label['label'] }}
      </mat-list-option>
    </mat-selection-list>
    <app-calendar (dateRange)="isChecked($event)"></app-calendar>
  </div>
</mat-menu>

<mat-menu #animals="matMenu">
  <app-autocomplete (selectedMembers)="isChecked($event)"></app-autocomplete>
</mat-menu>
this is the html.
Daniel Willis
@danww
k k