Using ion-list with multiple *ngFor loops

I am trying to combine data from two arrays, "subtitles" and "title", into an ion-list so that each ion-item displays a title on top of a subtitle. How can I achieve this?

In my .ts file:

items = [
 'Email',
 'Phone Number',
 'Address',
 'Cards'
];

data = [ 
  "first last",
  "test phone number",
  "test address"
]

In my .html file

<ion-content padding>
 <ion-list class="list">
  <div *ngFor="let unit of data">
    <button ion-item *ngFor="let item of items" (click)="enterPage(item)">
        {{item}}
        {{unit}}
   </button>
  </div>
 </ion-list>
</ion-content>

Answer №1

  <div ion-item *ngFor="let item of items; let i = index" (click)="openPage(item)">
        {{items[i]}}
        <h3>{{info[i]}}</h3>
  </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

Is it possible to use square brackets in conjunction with the "this" keyword to access a class property using an expression?

export class AppComponent implements OnInit { userSubmitted = false; accountSubmitted = false; userForm!: FormGroup; ngOnInit(): void {} onSubmit(type: string): void { this[type + 'Submitted'] = true; if(this[type + 'For ...

Exploring the world of Typescript class decorators and accessing its content from within

Greetings, I am searching for a method to define a class in TypeScript and retrieve its value from within the parent. abstract class Base{ fetchCollectionName(): string{ // code here to return child class attribute value } } @Collectio ...

What is the true function of the `as` keyword within a mapped type?

I am new to typescript and I find the usage of as confusing in the following example. type foo = "a" | "b" | 1 | 2; type bar = { [k in foo as number]: any } This example passes type checking. The resulting bar type is transformed i ...

The property is not found in the '{}' type but is necessary in the type... Typescript connect strategy

Hello, I am currently trying to establish a connection pattern for React with TypeScript. I have a reducer set up as follows: type State = { version: number, a?: string } interface ActionC { type: string payload?: number } type IAction = Action ...

Steps for automatically closing a TextPrompt if the end user does not respond within a specific time frame

How can I programmatically close a Prompt in Microsoft Chatbot SDK v4, such as TextPrompt or ConfirmPrompt, and end the dialog after a certain period of time if the user does not reply? I attempted to use setTimeout and step.endDialog but encountered issu ...

What is the best way to retrieve the previously chosen item from an array?

I have successfully implemented dynamic pill tabs with one minor issue remaining. The most crucial aspect is that when I remove a pill, I want it to return to the previously opened tab. I have provided a StackBlitz example without routes on this page: -> ...

Loader for dynamically loading tabs in Angular 2

I am looking to develop a dynamic tabs loader using Angular 2 material with specific syntax support. <generic-tabs [tabs]="tabs" tabVisibleField="name"> <test-cmp [tabContent] testData="hello"></test-cmp> ...

Angular material stepper displaying incorrectly

Here is the HTML code I used for creating an Angular Material stepper: <mat-horizontal-stepper class="stepper"> <mat-step label="Basic" state="cloud_download"> Step 1 <button mat-button matSteppe ...

Cannot retrieve the array stored within my object

Trying to navigate my way through Angular as a newcomer (just transitioning from AngularJS) I'm working with an api call that returns an object containing a subdocument (array). The structure of the object returned by the api is: contact:{ first_ ...

Using Angular 2: Exploring the power of observables for broadcasting events during a forEach loop

Upon testing the service within a forEach loop, I noticed that the parameter I passed to the service ended up being the last one in the iteration. I initially suspected that the issue was due to closures, so I attempted using an anonymous function to add ...

Error: UserService (?) is missing parameters and cannot be resolved

Upon compiling my application, an error is appearing in the console: Uncaught Error: Can't resolve all parameters for UserService (?) Despite having @Injectable() present for the UserService, I am unsure where to troubleshoot further. import {Inj ...

What is the correct way to initialize and assign an observable in Angular using AngularFire2?

Currently utilizing Angular 6 along with Rxjs 6. A certain piece of code continuously throws undefined at the ListFormsComponent, until it finally displays the data once the Observable is assigned by calling the getForms() method. The execution of getForm ...

The autocomplete feature is not functioning properly when attempting to prefill form inputs with values from another component

After utilizing a service to transfer values from the first component to the second, I encountered an issue. When trying to fill out a form on the first component (url: localhost:4200) and submitting it, the redirection to url: localhost:4200/results where ...

Limiting the Rate of Requests to a TCP Server using net.Server

I've been utilizing net.Server as my TCP server. Is there a way to impose a message rate limit? I managed to find solutions for enforcing rate limits in Express (express-rate-limit) and Websocket (websocket-rate-limit), but nothing specifically for ...

The function is trying to access a property called addclass on an object

When I pass a dom node along with a classname to a directive, the directive should add a class to the passed dom element. However, I am encountering an error that says "Cannot read property addclass of undefined." For reference, please visit this plnkr l ...

Incorporating an Angular 2 application into HawtIO as a plugin

Can we integrate an entire Angular2 application as a plugin in HawtIO? By doing this, we aim to leverage HawtIO as the main container for our OSGi applications, each with its own user interface, allowing us to easily detect and display each UI web app with ...

Checking JavaScript files with TSLint

After spending many hours attempting to make this work, I still haven't had any success... I am wondering: How can I utilize TSLint for a .js file? The reason behind this is my effort to create the best possible IDE for developing numerous JavaScrip ...

Issues with displaying results from a local JSON file using Angular 4 services seem to be

I have developed a User.service.ts service where I have implemented the following code: getContactDetials(){ return this.http.get(this.config.apiUrl + 'assets/data/contact-details.json') .map(response => response.json()); ...

Looking for a method to call a child component's function through a click event triggered from the parent component?

How can I trigger a specific function in my child component from a click event in my parent component? Any assistance would be greatly appreciated! ...

When an import is included, a Typescript self-executing function will fail to run

Looking at this Typescript code: (()=> { console.log('called boot'); // 'called boot' })(); The resulting JavaScript is: (function () { console.log('called boot'); })(); define("StockMarketService", ["require", "exp ...