Combining observation arrays with RxJS!

Displaying a concise overview of dates is the goal here (a simplified example provided).

someArray$: Observable<Date[]> = of(
new Date(2019, 11, 1),
new Date(2019, 11, 2),
new Date(2019, 11, 3));

Following that, a backend call retrieves data in this format:

anotherArray$: Observable<MyClass[]> = of(
{date: new Date(2019, 11, 1), active: true},
{date: new Date(2019, 11, 2), active: false},
{date: new Date(2019, 11, 3), active: false});

With someArray$ already being displayed using *ngFor in the template, I'm contemplating a way to combine them seamlessly without subscribing and utilize the boolean value from the second array for visualizing activity.

angulartypescriptrxjs

Answer №1

Here are the steps to follow:

  1. Update your someArray$ variable with the following values:
someArray$ = of([
  { date: new Date(2019, 11, 1) },
  { date: new Date(2019, 11, 2) },
  { date: new Date(2019, 11, 3) }
]);
  1. Combine the two observables together:
import { merge } from 'rxjs';

dates$ = merge(
  this.someArray$,
  this.anotherArray$
);
  1. Use dates$ in an *ngFor loop in your template instead of someArray$

Check out this StackBlitz DEMO to see the active column values changing every 5 seconds.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Yelp API call resulting in an 'undefined' response

When attempting to make an API call using the yelp-fusion, I noticed that the logged result is showing as undefined. It seems like this issue might be related to promises or async functions. It's important for me to maintain this within a function sin ...

javascripttypescripthttpfetchyelp

What steps should I take to customize WebStorm so that it no longer automatically imports the entire Typescript paths?

Recently, I noticed a change in WebStorm after an update that affected how paths were imported in my files. Initially, when typing @Component and letting WebStorm automatically import the path, it would use the following format: import { Component } from ...

angulartypescriptwebstormjetbrains-ide

TypeORM - Establishing dual Foreign Keys within a single table that point to the identical Primary Key

Currently, I am working with TypeORM 0.3.10 on a project that uses Postgres. One issue I encountered is while trying to generate and execute a Migration using ts-node-commonjs. The problem arises when two Foreign Keys within the same table are referencing ...

node.jstypescriptpostgresqlforeign-keystypeorm

Angular and Bootstrap button collections

Incorporating Angular with Bootstrap, we have constructed a button group as shown below: <div class="input-group-append"> <div class="btn-group" role="group"> <button class="btn btn-sm btn-outline-sec ...

angularangular-ui-bootstrap

HTML element within a cell of an Angular material table

Can someone assist me with a problem I am facing? I have a MatTable (Angular Material) with multiple dynamic columns using MatTableDataSource. One of the columns needs to display information from another application. Here is what I want to achieve: If ...

angulardynamic

Unable to retrieve data list in Angular TypeScript

After sending a request to the server and receiving a list of data, I encountered an issue where the data appears to be empty when trying to use it in another function within the same file. The code snippet below initializes an array named tree: tree:any ...

javascriptangulartypescript

Showing error messages in Angular when a form is submitted and found to be invalid

My form currently displays an error message under each field if left empty or invalid. However, I want to customize the behavior of the submit button when the form is invalid. <form #projectForm="ngForm" (ngSubmit)="onSubmit()"> ...

javascripthtmlangulartypescriptforms

Avoid installing @types typings in dependencies

Can I prevent global typings from being included in installed dependencies? I recently installed a local dependency, which led to the node_modules folder of that dependency being copied over. Within this node_modules folder are @types typings that clash w ...

typescripttypescript-typings

`Is it more effective to define an array outside of a component or inside of a component in React?`

Exterior to a unit const somevalue = [1, 2, 3, 4, 5, 6]; const Unit = () => { return ( <div> {somevalue.map((value) => <span>{value}</span>)} </div> ); }; export default Unit; Interior to a unit const Unit ...

javascriptreactjstypescript

Guide to implementing a Page Object Model for improved debugging of Protractor tests

Introduction I am on a mission to streamline my e2e testing code using the Page Object Model for easier maintenance and debugging. My Approach When embarking on creating end-to-end tests with Protractor, I follow these steps to implement the Page Object ...

typescriptdebuggingprotractorpageobjects

The React build script encounters issues resolving node modules while operating within a Docker environment

I'm currently in the process of dockerizing a React app that was initially created using CRA (Create React App) with TypeScript manually added later on, rather than through CRA. My file structure looks like this: <my app> ├── node_modules ...

reactjstypescriptdocker

Angular progress bar with intermittent breaks

Currently developing an Angular application and looking to implement a progress bar similar to the one displayed in the linked images. https://i.sstatic.net/5doDu.png https://i.sstatic.net/SP2it.png Although there are multiple progress bars available on ...

angularangular11

Tips for streamlining the transfer of essential features from a main project to its duplicate projects

In my Angular project, I have a core repository on GitHub that serves as the foundation for custom client projects. Each time a new client comes onboard, we create a clone of the core project and make customizations based on their requirements. The issue ...

javascriptangularnpm

Does the message "The reference 'gridOptions' denotes a private component member in Angular" signify that I may not be adhering to recommended coding standards?

Utilizing ag-grid as a framework for grid development is my current approach. I have gone through a straightforward tutorial and here is the code I have so far: typography.component.html https://i.stack.imgur.com/XKjfY.png typography.component.ts i ...

htmlnode.jsangulartypescriptag-grid

Tips on selecting an element with matching element attributes on a button that contains a span tag using Protractor in TypeScript

https://i.sstatic.net/LAhi8.jpg Seeking assistance with creating a protractor TypeScript code to click a button with _ngcontent and span class. Does anyone have any suggestions on how to achieve this? Here is the code snippet from the site: <form _ngc ...

angulartypescriptjasmineprotractorwebautomation

Subscribing to an observable with a property that references itself

I am currently working on a class that stores time information and retrieves timestamps from the server. I need to format and display this date data. export class Product { timeCreated: number; // current method not functioning as expected ge ...

javascriptangular

Pause for a few moments until assigning a new value to the observable

In my application, I have implemented a message service that emits messages whenever the API method is triggered. The main purpose behind this is to allow all other components in the app to utilize the service for displaying error or success messages. imp ...

angularrxjsrxjs5

Learn how to generate specific error messages based on the field that caused the failure of the @Column({ unique: true }) Decorator. Error code 23505

Hey there! I'm currently facing an issue while trying to handle Sign Up exceptions in my code. I want to inform the user if their username OR email is already in use. Although using the decorator @Column({ unique: true}) allows me to catch error 23505 ...

typescriptpostgresqlerror-handlingnestjstypeorm

Strategies for sending data to ng-container through ngTemplateOutlet

Currently, I am delving into mastering Angular directives and I am facing an issue with passing a value to my component. Here is the code snippet: My Component ` @Component({ selector: 'app-my-one', template: ` <ng-container *n ...

angular

Guide on altering the bar colors based on their values with the help of the ApexCharts library and the Angular framework

I'm facing an issue with a component that displays a graph with 2 series: Indicators and Bonus. The rule I set is that when the value ranges from 0 to 99, the bar turns red. If it's greater than 99, the bar should be green. This works fine for t ...

angularbar-chartapexchartscolumn-chartng-apexcharts