Exploring the power of nesting views using *ngFor in Ionic framework

I am looking to design a screen that features nested views using the *ngFor loop. The data I have is in a two-dimensional array format and I want to iterate through it to display the same view for each row within each section. It should look something like this:

(SectionName 1)
      Row1
      Row2
(SectionName 2)
      Row1
      Row2

For each row, I plan on using ion-item with buttons and input boxes.

If you have any insights on how to achieve a 2-dimensional repeated UI, please share them with me.

Thank you!

angulartypescriptionic-frameworkionic2ionic3

Answer №1

It is important to provide detailed descriptions of what you are trying to achieve to avoid misinterpretations.

My initial interpretation based on your request is outlined below:

https://stackblitz.com/edit/ionic-boxpjy

Consider the given array:

array = [
    ["section 1 item 1", "section 1 item 2", "section 1 item 3"],
    ["section 2 item 1", "section 2 item 2", "section 2 item 3", "section 2 item 4"],
  ]

https://i.sstatic.net/W9TlG.png

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

Angular CLI - exploring the depths of parent-child component communication

My issue revolves around accessing the 'edit' method of a child component using @ViewChild, but for some reason it's not functioning as expected. Where could I possibly be going wrong? Here are the console logs: https://i.sstatic.net/wvpVN ...

angulartypescriptparent-childangular-cli

Assignment of type 'Object' is incompatible with type in new HttpClient / HttpGetModule implementation within Angular

After following the angular tutorial, I decided to test out the new httpClient.Get method. However, it seems that no matter what, it always returns results of type Object. // HttpClient getHeroes2 () { this.http.get<Hero[]>(this.heroesUrl) ...

angulartypescript

What method can be used to start an Angular app without the need for recompilation?

When I first created my Angular app, I used the command ng serve to build and run it. This command produced the following output: 10% building 3/3 modules 0 activei ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/ i ｢wds｣: we ...

angular

How can we create a versatile Action type in typescript that can accommodate varying numbers of arguments and argument types?

When working with Typescript, encountering a duplicate type error can be frustrating. For instance, consider the following code snippet: export type Action<T> = (arg:T) => void export type Action<T1,T2> = (arg1:T1, arg2:T2) => void How c ...

typescript

Arranging Typescript strings in sequential date format

Looking for guidance on how to sort string dates in chronological order, any expert tips? Let's say we have an array object like: data = [ {id: "1", date: "18.08.2018"} {id: "2", date: "05.01.2014"} {id: "3", date: "01.01.2014"} {id: ...

javascripttypescript

The appearance of the Angular material component is altered once integrated into a new Angular application compared to its presentation in the provided example

After adding the Angular Material component "Toolbar" to my project, I noticed that it does not appear the same as it does in the example provided. Despite using the same styles, the outcome is different. Here is what the example looks like on the project ...

cssangularsassangular-material

Unveiling RxJs: The secret to extracting the notifier value using the takeuntil operator

I have a straightforward Rxjs timer set up that runs until a notifier emits a signal, it's pretty basic so far. enum TimerResult = { COMPLETE, ABORTED, SKIPPED }; _notifier: Subject<TimerResult> = new Subject(); notifier$: Observab ...

angulartypescriptrxjstakeuntil

Issue with PrimeNG overlaypanel displaying error message "Functionality of this.engine.setProperty is not available"

After importing OverlayPanelModule as @NgModule in parent.module.ts, I added the following code in child.component.html: <p-overlayPanel [dismissable]="false" #overlay> Content </p-overlayPanel> However, upon testing, I encountered the error ...

angularprimeng

Challenges encountered when passing objects with Angular 2 promises

I am encountering a problem when using a promise to retrieve a Degree object in Angular 2. The initial return statement (not commented out) in degree.service functions correctly when paired with the uncommented implementation of getDegree() in build.compon ...

javascripttypescriptangularangular-promise

Ways to create an HTTP request by monitoring when users click outside of an input field

I am struggling to figure out how to achieve this in angular 2. I want to make an http request a few seconds after the user clicks out of the input box. The request should be based on the user's input. Any suggestions on how to accomplish this? I have ...

angular

Adjust the Angular menu-bar directly from the content-script of a Chrome Extension

The project I've been working on involves creating an extension specifically for Google Chrome to enhance my school's online learning platform. This website, which is not managed by the school itself, utilizes Angular for its front-end design. W ...

javascriptangulartypescriptgoogle-chrome-extension

Loop through the ng-content elements and enclose each one within its own individual nested div

Although it is currently not supported, I am curious to know if anyone has discovered a clever solution to this problem. In my current setup, I have a parent component with the following template: <dxi-item location='after' class="osii-item- ...

htmlangularangular6ng-content

The cross-origin resource sharing configuration has not been implemented

I have SenseNet 7.0.0 and ASP.NET 5.2.3 set up, with my Angular (Typescript) application running on localhost:4200 and the ASP.NET application running on localhost:55064. I followed this tutorial for installing Sensenet and used this tutorial for installin ...

angularcross-domainsensenet

Setting the locale in an extended datapipe in Angular 4: A step-by-step guide

I have created a custom pipe by extending the DataPipe Angular class. import { Pipe, PipeTransform } from '@angular/core'; import { DatePipe } from '@angular/common'; @Pipe({ name: 'dateTimeFormater' }) export class DateTi ...

javascriptangulardatelocale

Implementing ngFor to Iterate Through a JSON Object in Angular 6

Iterate through the object list retrieved from a JSON object Here is the JSON object that I have fetched: { "0": { "0": null, "1": "Consolidated Statements of Changes in Stockholders\u2019 Deficit", "2": null, "3": "", "4": "" ...

javascriptangularangular6angular7

Tips for submitting a request following a change in the variable

I am in the process of developing a React application and I have implemented Auth0 for authentication. My goal is to initiate an HTTP request upon page refresh, but only if the variable isLoading is false. This way, I can access the user object once the ...

javascriptreactjstypescriptnext.js

Using Angular to send a text to an injection service

i have developed a generic CRUD service that utilizes HttpClient through Dependency Injection (DI). However, I need to include another value in the constructor of this service. How can I achieve this? the issue arises when attempting to define this additi ...

angulardependency-injectiondependenciescode-injection

unable to connect a value with the radio button

I am struggling to incorporate a radio group within a list of items. I am facing difficulty in setting the radio button as checked based on the value provided. Can anyone provide me with some guidance? Here is the HTML code snippet: <div *ngFor=" ...

javascripthtmlangulartypescript

Using Lodash to eliminate objects from a list

I have a specific model for my list, it looks like this: Animal Model id name age gender city Within the animals[] = []; array that I am working with, I need to remove the fields name, age, and gender while keeping id and city. How c ...

angulartypescriptlodash

Ionic - Smooth horizontal tab scrolling for sorted categories

Currently, we are developing a web/mobile application that includes horizontal scroll tabs to represent Categories. While this feature works well on mobile devices, it requires additional functionality for web browsers. Specifically, we need to add two arr ...

angulartypescriptionic-frameworkionic2ionic3