Swapping elements in an *ngFor loop using Angular/Ionic

In my quest to create a dynamic list of items using the Angular directive *ngFor, I have come up with the following structure:

Text - Image
Image-Text
Text - Image
Image-Text

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

  <ion-grid>
    <ion-row *ngFor="let item of items">
      <ion-col col-6 ">
        <ion-card ">
          <ion-card-content>{{item.name}}
          </ion-card-content>
        </ion-card>
      </ion-col>
      <ion-col col-6 >
        <ion-card>
          <img [src]="item.img"/>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>

As excited as I am about this setup, I'm facing some doubts on how to implement it effectively in a loop. Any thoughts or suggestions would be greatly appreciated. Thank you!

htmlcssangularionic2material-design

Answer №1

To achieve a reverse layout, consider using flex-direction: row-reverse when the item index is either odd or even - the choice is yours.

<!--HTML-->
<!--Keep track of item indexes and add the 'reverse' class based on odd or even condition (customize comparator as needed)-->
<ion-grid>
    <ion-row *ngFor="let item of items; let i = index;" [class.reverse]="i%2 !== 0">
        <ion-col col-6>
            <ion-card>
                <ion-card-content>{{item.name}}
                </ion-card-content>
            </ion-card>
        </ion-col>
        <ion-col col-6>
            <ion-card>
                <img [src]="item.img" />
            </ion-card>
        </ion-col>
    </ion-row>
</ion-grid>

<!--CSS-->
.reverse { flex-direction: row-reverse; }

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

Transform each item in an array into its own separate array using JavaScript (ES6)

Transform each item in an array into a separate sub-array and then combine them into one array. inputArray = ['One', 'Two', 'Three'] Desired Result outputArray = [['One'],['Two'],['Three']] How ...

javascriptarraysangulartypescript

The code is triggering IE 8 to switch to compatibility mode resembling IE7

I have created a custom javascript function that generates a pop-up, and I am invoking this function in my code. However, every time I click the button, the browser switches to IE 7 compatibility mode and the pop-up appears behind the button. Below is my ...

javascriptjqueryhtmlinternet-explorer

Defining the NgRx root state key within the application state interface

Here is an example of a selector taken from the NgRx documentation: import { createSelector } from '@ngrx/store'; export interface FeatureState { counter: number; } export interface AppState { feature: FeatureState; } export const sel ...

javascriptangulartypescriptreduxngrx

The functionality of the onclick and onserverclick attributes seem to be malfunctioning when

I am in the process of creating a basic login screen using the code provided below: <form id="login"> <div class="formHeader"> <h1>Login</h1> </div> <div class="formDiv"> <input type="text" placeholder="Email" na ...

c#htmlasp.net

Customize the Carousel navigation arrows in Bootstrap 3

Greetings everyone, I am currently utilizing Bootstrap's Carousel options and I am looking to change the appearance of the arrows as I find them unattractive. My desired look for the arrows is as follows: https://i.sstatic.net/Rz9Mb.png However, I ...

htmltwitter-bootstrapcss

Embedding images within written content

Is there a way to insert an image into text from a specific position without using tables? I'm looking for a method other than aligning the image "left or right". https://i.sstatic.net/8gvxk.png ...

htmlcss

The ngModel functionality struggles to accurately detect changes within arrays

The component model: private SomeArray = [{ key: "Initial" }]; User has the ability to dynamically add or remove items: addField() { this.SomeArray.push({ key: Math.random().toString() }); } removeField(index: number) { this.SomeArray.splice(ind ...

javascriptangularangular2-template

Passing a retrieved parameter from the URL into a nested component in Angular

I'm currently facing an issue where I am trying to extract a value from the URL and inject it into a child component. While I can successfully retrieve the parameter from the URL and update my DOM with a property, the behavior changes when I attempt t ...

angulartypescriptangular-lifecycle-hooks

Utilize Jquery to hide radio buttons, while allowing users to click on an image to display a larger version

My current HTML structure is restricted to SAAS, so I only have control over jQuery implementation. https://i.stack.imgur.com/OHB9K.jpg I am attempting to achieve a similar layout as shown in the image below. The main issue lies in how to (1) conceal ...

javascriptjqueryhtml

How can we utilize lodash debounce to debounce a function within the modelChange function?

I need help with utilizing a debounced function within my modelChange function. Whenever the model changes, this function is invoked. Currently, I am attempting to use lodash's debounce feature, but it doesn't seem to be triggering the function. ...

angularlodashangular-formlydebouncing

Creating a customized tooltip without the need for calling $(document).foundation() and using modernizr

I'm facing an issue with initializing the foundation tool-tip without having to initialize everything (such as $(document).foundation()). It seems like a simple task, but I am struggling. I have two questions in mind: (1) How can I utilize new Founda ...

javascriptjqueryhtmlzurb-foundation

Organizing Telephone Number Entries in Angular

In my search for a way to format a phone number input field in Angularjs, I have come across many solutions, but none specifically for Angular 7. What I am looking to achieve is for the user to enter the textfield like so: 123456789 and have the textfi ...

angulartypescriptformatphone-number

Using a Bootstrap navbar in place of a select element

Currently, I am noticing that styling options for a <select> with <option> are quite limited. To overcome this, I am exploring the idea of implementing a bootstrap menu, which offers a wider range of styling possibilities. Here is the basic str ...

cssbootstrap-4

What is the best way to center an annotation horizontally above a word within a sentence?

I am looking for a CSS element that will allow me to place an annotation above a specific word or part of a sentence. The annotation should always be visible and not disrupt the surrounding text. It is easy to achieve this effect if the word is longer tha ...

htmlcss

Guide on how to dynamically generate a dropdown menu based on the selection made in another dropdown

Could anyone provide me with a demonstration on how to dynamically create a dropdown menu based on the onchange event of another dropdown? I currently have a dropdown menu where users can select multiple options, as shown below: <select id='fir ...

javascriptjqueryhtmldrop-down-menu

What is the best way to resize an image to fit neatly within a specified frame?

In my CSS, I have implemented two breakpoints: For iPhones: Only the resume content should be visible without any image - this is working fine. For desktops: The image should be aligned to the left side of the resume content. However, I am encountering a ...

htmlcss

modification of the tooltip's background shade on Google Maps

Currently, I am using Google Chart to display data for different countries. When hovering over these countries, a tooltip is displayed which fetches data from the backend. However, I would like to customize the background color of this tooltip as it is cur ...

javascriptjquerycssgoogle-visualization

Creating a Protected Deployment Environment on AWS for Angular and Spring Boot Applications

Recently, I attempted to deploy a backend Spring Boot application and an Angular front end application on AWS. After successfully pushing my Docker image to ECS, I managed to run multiple services behind application load balancers. Specifically, I set up t ...

angularamazon-web-servicesspring-bootdockerssl

The functionality to deselect multiple options in a select box is not functioning properly

There seems to be an issue with removing the selected attribute from the selected values in a jQuery multiselect box. The console is not showing any errors. You can view a working example here The problem lies in this code snippet: $("#mltyslct option ...

javascriptjqueryhtmlmulti-select

Is it advisable to send an http request within the ngOnInit of an Angular Universal component?

During my Angular app development, I did not encounter any errors while running it via ng serve. However, when I switched to SSR (Server-Side Rendering), I started receiving an error in my server log whenever a component that makes an http request as part ...

angularangular-universalhttp-proxy-middleware