Attempting to fill a template using ngfor, wherein the initial 2 elements are displayed in a row

Question

Attempting to fill a template using ngfor, wherein the initial 2 elements are displayed in a row

I am attempting to complete a task where, using an ngFor directive to iterate through an array, I need to display the first 2 elements in a row and the remaining elements in a descending column. It should look like this:

first  second

third

fourth

fifth

..nth

To achieve this, I tried applying ngClass to conditionally style the first two elements like so:

                    <div class="d-flex flex-row">
                      <div *ngFor="let item of array; let i = index">
                        <span [ngClass]="{ 'd-flex flex-column': i > 1 }">
                          <div>{{item}}</div>
                        </span>
                      </div>
                    </div>

However, this approach is not working as intended since all elements are still displayed in a row. Any suggestions on how to improve this? Thank you in advance.

html css angular for-loop

Answer 1

Answer №1

A container styled with CSS flex for alignment of content in the same row must have each content wrapped in its own div or span tag.

In the snippet below, I have eliminated the d-flex class from the first line and the flex-column class from the span element to ensure that the content stays on the same line for the initial two items.

Before attempting to place the first two elements within a flex container, it is necessary to have their values predefined. An alternative approach would be to store these initial values in a list within your component code, accessing them as the first item of an array and outputting them on each row.

Give this a try:

<div class="flex-row">
    <div *ngFor="let item of myArray; let i = index">
        <span *ngIf="i==0">
            <div class="d-flex">
                <div>{{myArray[0]}}</div>
                <div>&nbsp;</div>
                <div>{{myArray[1]}}</div>
            </div>
        </span>
        <span *ngIf="i==1">
        </span>
        <span *ngIf="i>1">
            {{item}}
        </span>
</div>

By following the above code structure, you should achieve the desired outcome.

Answer 2

A container styled with CSS flex for alignment of content in the same row must have each content wrapped in its own div or span tag.

In the snippet below, I have eliminated the d-flex class from the first line and the flex-column class from the span element to ensure that the content stays on the same line for the initial two items.

Before attempting to place the first two elements within a flex container, it is necessary to have their values predefined. An alternative approach would be to store these initial values in a list within your component code, accessing them as the first item of an array and outputting them on each row.

Give this a try:

<div class="flex-row">
    <div *ngFor="let item of myArray; let i = index">
        <span *ngIf="i==0">
            <div class="d-flex">
                <div>{{myArray[0]}}</div>
                <div>&nbsp;</div>
                <div>{{myArray[1]}}</div>
            </div>
        </span>
        <span *ngIf="i==1">
        </span>
        <span *ngIf="i>1">
            {{item}}
        </span>
</div>

By following the above code structure, you should achieve the desired outcome.

Attempting to fill a template using ngfor, wherein the initial 2 elements are displayed in a row

Answer №1

Similar questions

Adjust the placement of image when changing the size of the window

Issue: ng test encountered a StaticInjectorError related to FormBuilder

Exploring the process of integrating absolute paths within a global SCSS file in a VueJS project

Error: Unexpected character < in node_modules/angular2/ts/package.json syntax

Looking to develop a swipeable card feature similar to Gmail using React JS (excluding React Native)?

Enhancing productivity with a more streamlined process for creating a responsive website design through the optimization of

Refreshing a webpage to accurately display changes made in a CRUD application without the need for a hard reset

Navigating through dropdown browser menus using VBA

Tips for adding images using v-for in Vue 3

Fluid Grid design showcasing a gap on the right side

Ways to align a button in the center using Material-UI

What is the best way to render multiple components from a single file in the App.js?

Calculating the Vertical Size of a Component within Django Template Design

Obtaining the class value using the getAttribute function

Creating a CSS key animation for resizing an image: What is the correct way to make an image expand and contract

I'm encountering difficulty accessing the Index value within the template's Ref

javascript - Retrieving a JSON string

I need assistance finding and selecting multiple checkboxes on the HTML page. Can someone help me locate them?

Insert data into a drop-down menu and organize it

Enhance Your Website with Bootstrap 3.0 Affix