Combine two elements in an array

I am faced with a challenge in binding values from an Array. My goal is to display two values in a row, then the next two values in the following row, and so on. Unfortunately, I have been unable to achieve this using *ngFor. Any assistance would be greatly appreciated.

TS

times = ["7.00 AM","8.00 AM","10.00 AM","11.00 AM","1.00 PM","2.00 PM","4.00 PM","5.00 PM"]

HTML

<div *ngFor="let time of times">
<button class="btn btn-outline">{{time}}</button>
</div>

However, the current setup only displays one item per row.

Desired outcome:

javascriptangulartypescript

Answer №1

Use the index to access the next value within the array

<div *ngFor="let time of times; let i = index;">
  <button
    *ngIf="times[i + 1]"
    class="btn btn-outline"
  >{{time}} - {{times[i + 1]}}</button>
</div>

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

What is the reason behind Typescript errors vanishing after including onchange in the code?

When using VSCode with appropriate settings enabled, the error would be displayed in the following .html file: <!DOCTYPE html> <html> <body> <div> <select> </select> </div> <script&g ...

typescriptvisual-studio-codejsdoc

Leveraging the power of JavaScript to reveal concealed div elements

I've got a collection of divs (five in total) with a hidden class applied to them in my CSS stylesheet. Each div also has its own unique ID. My goal is to use JavaScript to reveal these divs one by one. Here's an example of what I'm looking ...

javascriptcssclasshtml

Exploring NodeJS and ExpressJS: Unveiling the significance of routes/index.js

Can you explain the function of this particular file? Does this file handle all the GET and POST requests in a project? If so, wouldn't it become excessively long and complex for larger projects? I encountered an issue when trying to call a POST re ...

javascriptnode.jsexpresspug

The bundle.js file is displaying HTML code instead of JavaScript

I have been working on setting up redux server-side rendering using express.js. Most of the setup is done, but I encountered an error while trying to render the page in the browser. The error message Uncaught SyntaxError: Unexpected token < is appearin ...

javascriptnode.jsreactjswebpackredux

React transmits an incorrect argument through the function

Having a bit of trouble passing a parameter alongside the function in my for loop to create SVG paths. The props are working fine with the correct 'i' value except for selectRegion(i) which ends up getting the final value of 'i' after t ...

javascriptreactjs

What is the reason for the absence of the Access-Control-Allow-Origin response header in .NET Core CORS Policy?

Take a look at the following code snippet: builder.Services.AddCors(options => { options.AddPolicy(name: "MyPolicy", policy => { policy.WithOrigins("http://example.com", ...

angularasp.net-core

Learn how to trigger an HTTP exception after a failed command in a saga with NestJS CQRS

Currently utilizing the NestJS CQRS pattern to handle interactions between User and UserProfile entities within my system. The setup consists of an API Gateway NestJS server along with dedicated NestJS servers for each microservice (User, UserProfile, etc. ...

javascripttypescriptdomain-driven-designnestjscqrs

"Implementing Vue mousemove functionality only when the mouse button is pressed

Is it possible to initiate a mouse movement only after the element has been clicked first? I am exploring this functionality for an audio player timeline. .player__time--bar(@mousedown="setNewCurrentPosition($event)") .slider(role="slider" aria-valuem ...

javascriptvue.jsvuejs2mousedown

The functionality of anchor links created through ajax is not operating correctly

Issue: I am encountering a problem where I have a table filled via Ajax, containing local anchors. When an anchor is clicked, it should make a section visible and automatically scroll to it. This functionality works when manually filling the table, but not ...

javascriptphpjqueryhtmlajax

The generics in TypeScript for Parameters<URLS[T]> and the corresponding URLS[T] are not compatible

In the code below, I am encountering a type error: const urls = { inviteNewUser: ({teamId, intent = 'invite'}: {teamId: string; intent?: Intent}) => `/magic-link?intent=${intent}&teamId=${teamId}`, resetPassword: ({intent = 'r ...

typescripttypescript-generics

The Vue template syntax utilizes double curly braces for incrementing values within must

Embarked on learning Vue.js recently and I am intrigued by the unusual behavior in my simple code. I cannot seem to figure out what is going wrong. I am attempting to increment a counter inside mustache syntax, but something strange is happening with this ...

javascriptvue.js

A guide on mapping an array and removing the associated element

I have an array called responseData, which is used to display the available card options on the screen. public responseData = [ { id: 1399, pessoa_id: 75898, created_at: '2022-11-08T16:59:59.000000Z', holder: 'LEONARDO ', validade: ...

javascripthtmlarraysangular

Tips for integrating the react-financial-charts library into your React and JavaScript project

While exploring the react-financial-charts library, I discovered that it is written in TypeScript (TS). Despite my lack of expertise in TypeScript, I am interested in using this library in my React+JS project due to its active contributions. However, I hav ...

javascriptreactjstypescriptnpm

What exactly does the question mark represent in the code structure as indicated in VSCode?

When looking at the image, you can see that in the description of done(), VSCode indicates the type of parameters using a colon error: any or sometimes with a question mark and colon user?: any. So, what exactly is the distinction between these two ways o ...

javascriptnode.jstypescriptvisual-studio-code

What's Preventing TypeScript Enum Keys from Being Transformed during Compilation?

I've encountered an issue while working on a project with TypeScript, Webpack, Babel, and React. The problem arises when trying to use enum members as keys for an object. Here's a snippet of the problematic file: // traits.ts import { Trait } fr ...

reactjstypescriptwebpackenumsbabeljs

AJAX requires manual updating by clicking on a button

I've created a chat system where two individuals can communicate with each other. An AJAX function has been implemented to update the message container every 2 seconds. However, I have noticed that the AJAX call doesn't run immediately after a u ...

javascriptjqueryajax

Selenium Refuses to Launch My Local Browser Despite Explicit Instructions

While using Chrome browser with selenium, I encountered an issue related to browser profiles. Everything works smoothly when the correct binary path is provided, but if an incorrect path is given, it refuses to run. The specific problem arises when the br ...

javascriptselenium-webdriver

Animating CSS styles in Vue.js based on JavaScript triggers

Within my Vue.js application, I've implemented a login form that I'd like to shake whenever a login attempt fails. Though I have achieved the desired shaking effect, I'm not completely satisfied with my current solution. Here's a simpl ...

javascriptcssvue.js

The 'fullDocument' property is not present in the 'ChangeStreamDropDocument' type

Upon cloning an express TypeScript project, I encountered a Typescript error within a Mongo related function as mentioned in the title. Property 'fullDocument' does not exist on type 'ChangeStreamDocument<IUser>'. Property &apos ...

typescriptmongodbexpress

Tips for dynamically updating the path in angular as you scroll

https://i.stack.imgur.com/KlmnQ.jpg Currently utilizing Angular 17, my goal is to create a page with multiple components accessible through unique paths. Clicking on the navigation menu should automatically scroll to the desired component and update the p ...

angularangularjsurl-routing