Utilize ngFor to showcase additional items preceding the initial element

Question

Utilize ngFor to showcase additional items preceding the initial element

Is there a way to display an array using ngFor, but have a card displayed before the first element that opens a modal when clicked?

https://i.sstatic.net/6QG0D.png

Here is the code snippet for reference:

<div fxFlex="25" *ngFor="let product of products; let i = index">
    <div *ngIf="i == 0">                           
        <mat-card (click)="addProduct()" class="mat-card-add-button">
            <div fxLayout="row" fxLayoutAlign="center center" fxFlex="100%">
                <span style="font-size:32px;text-align:center">+<br />Add product</span>
            </div>
        </mat-card>
    </div>

    <div fxLayoutAlign="center stretch">
        <mat-card class="product">
            <img mat-card-image src="{{product.picture.url}}" alt="photo">
            <mat-card-title>{{product.name}}</mat-card-title>
            <mat-card-content>
                <p>
                    {{product.description}}
                </p>
            </mat-card-content>
            <mat-card-actions align="end">
            </mat-card-actions>
        </mat-card>
    </div>
</div>

Currently, the code displays the first element (the card) and the second element like this:

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

Any suggestions on how to fix this issue? Thank you!

EDIT :

ngFor loop products :

first loop => my card "add product"
second loop => product A

EDIT 2 : For assistance with alignment of mat-cards content, refer to this post: Align mat-cards content (image, text and buttons)

css angular angular-material2 ngfor angular-flex-layout

Answer 1

Answer №1

To achieve the layout you described, I made some adjustments to your code. You can view a working example on this stackblitz. I utilized @angular/flex-layout as much as possible while minimizing the use of CSS.

UPDATE: I have made additional changes to the stackblitz based on a comment / follow-up question. The modifications are detailed in my answer to the follow-up question.

Explanation

To start, you do not need to place your button within the loop of the products. You can restructure your code like this:

<div class="container">

    <mat-card>
      <!-- your button content -->
    </mat-card>
        
    <mat-card>
      <!-- the loop -->
    </mat-card>

</div>

Next, apply the necessary flex-layout attributes.

Since the button is now outside the loop, you should define the layout attributes on the container:

<div class="container" fxLayout="row wrap" fxLayoutAlign="center center" fxLayoutGap="25px"> ... </div>

To ensure the styling consistency between the mat-card containing the button and the mat-cards containing the products, set the width using the fxFlex attribute, for example:

<mat-card fxFlex="180px" ... class="product"> <!-- button content --> </mat-card>
<mat-card fxFlex="180px" ... class="product"> <!-- loop content --> </mat-card>

A class named "product" will be used for any styling that cannot be achieved using flex-layout.

To make the mat-card containing the button the same height as the products, apply some CSS:

.product{
  min-height: 250px;
  margin-bottom: 25px; /* equal to fxLayoutGap for even spacing */
  
  /* additional styling */
}

Note that with the min-height approach, your button may appear smaller than the products if the product cards exceed 250px in height.

If you want the button to always match the height of the products, use

fxLayoutAlign="center stretch"

instead of

fxLayoutAlign="center center"

, but all mat-cards will adjust in height based on the window width, which may not be desired.

Answer 2

To achieve the layout you described, I made some adjustments to your code. You can view a working example on this stackblitz. I utilized @angular/flex-layout as much as possible while minimizing the use of CSS.

UPDATE: I have made additional changes to the stackblitz based on a comment / follow-up question. The modifications are detailed in my answer to the follow-up question.

Explanation

To start, you do not need to place your button within the loop of the products. You can restructure your code like this:

<div class="container">

    <mat-card>
      <!-- your button content -->
    </mat-card>
        
    <mat-card>
      <!-- the loop -->
    </mat-card>

</div>

Next, apply the necessary flex-layout attributes.

Since the button is now outside the loop, you should define the layout attributes on the container:

<div class="container" fxLayout="row wrap" fxLayoutAlign="center center" fxLayoutGap="25px"> ... </div>

To ensure the styling consistency between the mat-card containing the button and the mat-cards containing the products, set the width using the fxFlex attribute, for example:

<mat-card fxFlex="180px" ... class="product"> <!-- button content --> </mat-card>
<mat-card fxFlex="180px" ... class="product"> <!-- loop content --> </mat-card>

A class named "product" will be used for any styling that cannot be achieved using flex-layout.

To make the mat-card containing the button the same height as the products, apply some CSS:

.product{
  min-height: 250px;
  margin-bottom: 25px; /* equal to fxLayoutGap for even spacing */
  
  /* additional styling */
}

Note that with the min-height approach, your button may appear smaller than the products if the product cards exceed 250px in height.

If you want the button to always match the height of the products, use

fxLayoutAlign="center stretch"

instead of

fxLayoutAlign="center center"

, but all mat-cards will adjust in height based on the window width, which may not be desired.

Utilize ngFor to showcase additional items preceding the initial element

Answer №1

Explanation

Similar questions

A miniature triangle-shaped bubble crafted with 1px of CSS3 styling

Steps for connecting to a property in another component

Troubleshooting problem with aligning grid items at the center in React using

Creating a Cancel Button in JSP/HTML/JS/CSS Form: A Step-by-Step Guide

Does the Sass default compiler have built-in autoprefixing capabilities?

I am having trouble getting my footer to align properly in a vertical position

Unable to extend the data-toggle dropdown to the entire width of the screen

The parameter type '{ src: string; thumb: string; }' cannot be assigned to the 'never' type in the argument

Overflow: Truncating text with an ellipsis in the center

Keep track of the input values by storing them in an array after they are

Transforming the timestamp to a date object using Angular and Typescript

Including a Javascript library (jsencrypt) in an Angular 2 application

Animating changes on a webpage using CSS transitions in conjunction with the

Ways to initiate update notification when altering an array object?

The global class variable encounters an error when trying to assign the value of "socket" to it

Incorporating rounded corners to an embedded YouTube video

CSS Techniques for Smooth Transitions

Unlimited rotation - using setInterval function

The issue with making an HTTP POST request in Angular 2

Let's compare the usage of JavaScript's toUTCString() method with the concept of UTC date