# withLatestFrom

<details>

<summary>Signatura</summary>

#### Firma

`withLatestFrom<T, R>(...args: any[]): OperatorFunction<T, R>`

#### Parámetros

#### Retorna

`OperatorFunction<T, R>`: Un Observable de valores proyectados de cada Observable *input*, o un array de los valores más recientes de cada Observable *input*.

</details>

## Descripción

Cuando el Observable fuente emite un valor, combina dicho valor con las emisiones más recientes de los demás Observables, y emite el resultado de dicha combinación.

![Diagrama de canicas del operador withLatestFrom](https://github.com/puntotech/rxjs-docu/blob/master/doc/operators/combination/assets/images/marble-diagrams/join-creation/withLatestFrom.png)

`withLatestFrom` combina cada valor del Observable fuente (la instancia) con los valores más recientes de los demás Observables cada vez que la fuente emite un valor. Opcionalmente, se puede utilizar una función de proyección para determinar el valor que se emite en el Observable resultante. Todos los Observables *input* deben emitir al menos un valor para que el Observable resultante pueda emitir.

## Ejemplos

**Combinar cada tecla pulsada con un Observable intervalo, para saber en qué momento se pulsa cada tecla**

[StackBlitz](https://stackblitz.com/edit/docu-rxjs-withlatestfrom?file=index.ts)

```javascript
import { fromEvent, interval } from "rxjs";
import { withLatestFrom, map } from "rxjs/operators";

const key$ =
  fromEvent <
  KeyboardEvent >
  (document, "keydown").pipe(map(({ code }) => code));

const number$ = interval(1000);

key$
  .pipe(
    withLatestFrom(number$),
    map(([code, time]) => `Tecla ${code} pulsada a los ${time} segundos`)
  )
  .subscribe((x) => console.log(x));
// Salida: (2s) Tecla KeyR pulsada a los 2 segundos (1s) Tecla KeyX pulsada a los 3 segundos...
```

### Ejemplo de la documentación oficial

**Emitir un array con el temporizador más reciente más el evento click, en cada click**

```javascript
import { fromEvent, interval } from "rxjs";
import { withLatestFrom } from "rxjs/operators";

const clicks = fromEvent(document, "click");
const timer = interval(1000);
const result = clicks.pipe(withLatestFrom(timer));
result.subscribe((x) => console.log(x));
```

<details>

<summary>Sobrecargas</summary>

#### Firma

`withLatestFrom(project: (v1: T) => R): OperatorFunction<T, R>`

#### Parámetros

#### Retorna

`OperatorFunction<T, R>`

#### Firma

`withLatestFrom(source2: O2, project: (v1: T, v2: ObservedValueOf<O2>) => R): OperatorFunction<T, R>`

#### Parámetros

#### Retorna

`OperatorFunction<T, R>`

#### Firma

`withLatestFrom(v2: O2, v3: O3, project: (v1: T, v2: ObservedValueOf<O2>, v3: ObservedValueOf<O3>) => R): OperatorFunction<T, R>`

#### Parámetros

#### Retorna

`OperatorFunction<T, R>`

#### Firma

`withLatestFrom(v2: O2, v3: O3, v4: O4, project: (v1: T, v2: ObservedValueOf<O2>, v3: ObservedValueOf<O3>, v4: ObservedValueOf<O4>) => R): OperatorFunction<T, R>`

#### Parámetros

#### Retorna

`OperatorFunction<T, R>`

#### Firma

`withLatestFrom(v2: O2, v3: O3, v4: O4, v5: O5, project: (v1: T, v2: ObservedValueOf<O2>, v3: ObservedValueOf<O3>, v4: ObservedValueOf<O4>, v5: ObservedValueOf<O5>) => R): OperatorFunction<T, R>`

#### Parámetros

#### Retorna

`OperatorFunction<T, R>`

#### Firma

`withLatestFrom(v2: O2, v3: O3, v4: O4, v5: O5, v6: O6, project: (v1: T, v2: ObservedValueOf<O2>, v3: ObservedValueOf<O3>, v4: ObservedValueOf<O4>, v5: ObservedValueOf<O5>, v6: ObservedValueOf<O6>) => R): OperatorFunction<T, R>`

#### Parámetros

#### Retorna

`OperatorFunction<T, R>`

#### Firma

`withLatestFrom(source2: O2): OperatorFunction<T, [T, ObservedValueOf<O2>]>`

#### Parámetros

#### Retorna

`OperatorFunction<T, [T, ObservedValueOf<O2>]>`

#### Firma

`withLatestFrom(v2: O2, v3: O3): OperatorFunction<T, [T, ObservedValueOf<O2>, ObservedValueOf<O3>]>`

#### Parámetros

#### Retorna

`OperatorFunction<T, [T, ObservedValueOf<O2>, ObservedValueOf<O3>]>`

#### Firma

`withLatestFrom(v2: O2, v3: O3, v4: O4): OperatorFunction<T, [T, ObservedValueOf<O2>, ObservedValueOf<O3>, ObservedValueOf<O4>]>`

#### Parámetros

#### Retorna

`OperatorFunction<T, [T, ObservedValueOf<O2>, ObservedValueOf<O3>, ObservedValueOf<O4>]>`

#### Firma

`withLatestFrom(v2: O2, v3: O3, v4: O4, v5: O5): OperatorFunction<T, [T, ObservedValueOf<O2>, ObservedValueOf<O3>, ObservedValueOf<O4>, ObservedValueOf<O5>]>`

#### Parámetros

#### Retorna

`OperatorFunction<T, [T, ObservedValueOf<O2>, ObservedValueOf<O3>, ObservedValueOf<O4>, ObservedValueOf<O5>]>`

#### Firma

`withLatestFrom(v2: O2, v3: O3, v4: O4, v5: O5, v6: O6): OperatorFunction<T, [T, ObservedValueOf<O2>, ObservedValueOf<O3>, ObservedValueOf<O4>, ObservedValueOf<O5>, ObservedValueOf<O6>]>`

#### Parámetros

#### Retorna

`OperatorFunction<T, [T, ObservedValueOf<O2>, ObservedValueOf<O3>, ObservedValueOf<O4>, ObservedValueOf<O5>, ObservedValueOf<O6>]>`

#### Firma

`withLatestFrom(...observables: any[]): OperatorFunction<T, R>`

#### Parámetros

#### Retorna

`OperatorFunction<T, R>`

#### Firma

`withLatestFrom(array: any[]): OperatorFunction<T, R>`

#### Parámetros

#### Retorna

`OperatorFunction<T, R>`

#### Firma

`withLatestFrom(array: any[], project: (...values: any[]) => R): OperatorFunction<T, R>`

#### Parámetros

#### Retorna

`OperatorFunction<T, R>`

</details>

### Recursos adicionales

[![Source code](https://github.com/puntotech/rxjs-docu/blob/master/doc/operators/combination/assets/icons/source-code.png)](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/withLatestFrom.ts)

[Documentación oficial en inglés](https://rxjs.dev/api/operators/withLatestFrom)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://www.rxjs.es/operadores/combination/withlatestfrom.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.