What is the best way to showcase four columns of identical attributes in an HTML table without repeating the values four times?

I am working on an Angular system that fetches data from the Pokemon TCG API. I am specifically interested in the "cards.images.small" attribute, which provides the image link for display. However, I am facing an issue where the cards are being displayed quadrupled instead of normally. 

<div class="scroll">
        <span class="font-extrabold text-3xl" style="color: #ffcb08;" *ngIf="spinner">Loading cards</span>
        <table  *ngIf="!spinner" mat-table [dataSource]="dataSource" class="mat-elevation-z8 mat-table">
        
          <ng-container  matColumnDef="position">
            <th mat-header-cell *matHeaderCellDef></th>
            <td (click)="addCard(element)" mat-cell *matCellDef="let element"> <img class="card" [src]="element.images?.small" alt=""> </td>
          </ng-container>
          <ng-container  matColumnDef="position2">
            <th mat-header-cell *matHeaderCellDef></th>
            <td (click)="addCard(element)" mat-cell *matCellDef="let element"> <img class="card" [src]="element.images?.small" alt=""> </td>
          </ng-container>
          <ng-container  matColumnDef="position3">
            <th mat-header-cell *matHeaderCellDef></th>
            <td (click)="addCard(element)" mat-cell *matCellDef="let element"> <img class="card" [src]="element.images?.small" alt=""> </td>
          </ng-container>
          <ng-container  matColumnDef="position4">
            <th mat-header-cell *matHeaderCellDef></th>
            <td (click)="addCard(element)" mat-cell *matCellDef="let element"> <img class="card" [src]="element.images?.small" alt=""> </td>
          </ng-container>
          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        
        </table>
      </div>

View the issue of quadrupled cards

Here is the desired display for the cards: desired

htmlcssangulartailwind-css

Answer №1

My strategy for addressing this problem is outlined below

 <source src="../../../assets/pfhd.mp4" type="video/mp4">
</video>

<button (click)="goHome()" class="m-4" style="background-color: #fcea69; color: black;" mat-raised-button>Return to main menu</button>
 <div class="flex items-center justify-center  ">
   <div class="flex space-x-4 justify-center p-8">
     <span class="font-extrabold text-3xl text-center" style="color: #ffcb08;" *ngIf="spinner && exibe_title">Loading</span>
     <div class="scroll">
       <div class="flex flex-wrap -mx-4 container p-4">
         <div  *ngFor="let item of deckCards" class="w-full md:w-1/2 lg:w-1/5 px-4 mb-4">
           <img *ngIf="!spinner" (click)="addCard(item)" [src]="item.images.small" class="w-36 h-auto">
         </div>
     </div>
     </div>
     <div  *ngIf="showFilter" style="height: 350px; position: fixed; right: 50px;" class="info-deck bg-white p-8 shadow-md rounded-md">
       <mat-form-field>
         <mat-label>Deck Name</mat-label>
         <input  [(ngModel)]="nameDeck"  matInput placeholder="Deck Name" #input>
       </mat-form-field><br>
       <mat-form-field>
         <mat-label>Filter Card</mat-label>
         <input (keyup.enter)="getCardByName()" [(ngModel)]="userInput" matInput placeholder="Press ENTER" #input>
       </mat-form-field> 
       <h3 class="text-center">Cards Added: {{cardCounter}}</h3>
       <div class="flex w-full justify-around">
         <button [disabled]="paginatorOFF" (click)="onBeforePage()" mat-mini-fab style="background-color: #004a94; color: white;">
           <mat-icon>navigate_before</mat-icon>
         </button>
         <button class="mt-14" (click)="createDeck()" style="background-color: #004a94; color: white;" mat-raised-button>Save Deck <mat-icon aria-hidden="false" fontIcon="add_circle"></mat-icon></button>
         <span style=" position: fixed; right: 185px;" class="text-center mt-2">{{pageCounter}}/68</span> <br>
         <button [disabled]="paginatorOFF" (click)="onNextPage()" class="ml-3" mat-mini-fab style="background-color: #004a94; color: white;">
           <mat-icon>navigate_next</mat-icon>
         </button>
       </div>
   </div>
     
   </div>
 </div>

https://i.sstatic.net/dt4op.jpg I made modifications by eliminating a table and incorporating an ngFor loop for the div tag. I also had to adjust the filters to accommodate data from the previous table.

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

Tips for personalizing the Material-UI sticky header to work with horizontal scrolling

Check out this example of a Material UI table with a sticky header on CodeSandox: https://codesandbox.io/s/yi98d?file=/demo.tsx I encountered an issue where the left side header cells slide behind each other when I added a stickyHeader prop to the Materia ...

cssreactjsmaterial-ui

Instructions on how to extract a specific timestamp from a video and utilize it to initiate an event

Is there a way to trigger an event or animation at a specific time in a video or frame of the video? For instance, I want text to appear when a video reaches 30 seconds. I've experimented with currentTime, tried using loadeddata, and attempted to u ...

javascripthtmlaframe

Self-sufficient API service and online platform

I recently developed an Angular 4 application independently in Node.js and created a rest api service using dropwizard. I attempted to connect the website as a static asset for the dropwizard service, but encountered integration issues. Despite exploring v ...

javaangularmaven-3dropwizard

The Tumblr HTML code is not valid: There is a stray start tag for `html

Occasionally, I check my tumblog for validation in order to fix any errors. While most issues are easy to explain, there is one that has me stumped. What exactly does this mean? (please note: the outputted markup is out of my control) Error: Error: Stra ...

htmlvalidationtumblrw3c-validation

Incorporate AJAX functionality with a simple HTML button

Upon clicking the button, the AJAX call fails to execute. Below is the HTML code for the buttons: <td><button id=${data[i].id} name="update" type="button" value="${data[i].id}" class="btn btn-primary update" ...

javascripthtmljqueryajax

What is the technique for moving a slider-like checkbox slider to one of its labels when they are clicked on?

Is there a way to make the switch slider move to the word the user clicked on (medium or large)? I'm not sure if I can track the movement of the switch slider with JavaScript or if it's possible to do with CSS. Right now, I have only created a si ...

javascripthtmlcss

Angular error Uncaught ReferenceError: jQuery is not found

https://i.sstatic.net/RLZXY.png I included several JavaScript files in my component, but upon starting the app, the browser displays an error message: Uncaught ReferenceError: jQuery is not defined. I made sure to load jQuery before any other files, so I& ...

htmljqueryangularimportcomponents

Tips on incorporating a button to enable text formatting to 'bold' within a Text Area on an HTML webpage:

In the process of creating an online text editor, I am looking to incorporate a button above the text area that can be used to make selected text and/or upcoming text bold. To provide more clarity, I envision adding a bold button similar to the one found a ...

htmlcss

Tips for using CSS to position a sidebar on the right side of the screen:

I've been working on creating a simple sidebar and have reached this point in my code. However, I'm struggling to get it to float to the right. It's all a bit confusing for me. If you'd like to take a look at the code, here is a link t ...

htmlcss

Using Angular NgRx - triggering an action from an effect once certain actions yield a result

I'm encountering difficulties in dispatching actions that require results from five other actions (all listed in my effect). Could someone lend a hand? Essentially, I need to trigger an action within the effect only after these five actions have retu ...

javascriptangulartypescriptreduxngrx

Larger icon graphics

Is it possible to increase the size of Glyphicons in Twitter Bootstrap 3.0 without using the btn-lg class? I found this code that makes glyphicons big: <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-th- ...

csstwitter-bootstraptwitter-bootstrap-3glyphicons

Utilize CSS Animation to bring overlapped images to life

Trying to replicate the animation featured on the CISO website header. I have created a JSFiddle demo showcasing my attempt, but it seems like something is not quite right. img { transition: all .3s ease; overflow: hidden ...

htmlcsscss-animations

Leveraging the (click) event within an HTML template to manage a [hidden] element located in a different template using Angular 2

Within my project, I have two TypeScript files, each containing HTML templates inside the @Component. In one of the templates, there are info cards that can be collapsed or expanded using [hidden]="collapsed". The following function is present in both file ...

javascripthtmlangularjsionic-frameworkangular

- bullet point: tabulated

I need to create an unordered list with URLs included and indented, while keeping all lines justified to the left. * line one text text ted more text text text * line two text ted more text text text * line three text ted more text text text ...

css

What is the correct way to retrieve a JSON object instead of getting [Object object]?

Creating a basic web scraper integrated with mongoDB. Even though the API returns the JSON object in the correct format, when trying to append it to a bootstrap card on the page, I'm getting [Object object]. Below is my JavaScript code running on th ...

javascriptjqueryhtmljson

Using Perl's regular expressions to perform substitutions

Within an html file, my goal is to incorporate a link to the numbers that appear within the [ ] in various patterns such as: [1] or [1-2] or [1,3,6] or [1,3,4-6, 9]. While I have managed to match the simple pattern like the first one: $html =~ s`\[&b ...

htmlperlpattern-matching

Tips for reusing an SVG element that is embedded on the same page

My HTML5 page includes an embedded SVG icon element. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> </head> <body> ...

htmlsvg

Generating dynamic rows and columns with Angular and Bootstrap in real time

I am looking to dynamically generate rows in an angular template, with each row containing 4 columns. For example, if the input is 40, the output should have 10 rows, each consisting of 4 columns. I am using bootstrap for my template layout. Below is what ...

angulartypescript

Why is my CSS causing a div with 100% width to be slightly taller than expected?

I am working on a website that I want to adjust to the width of different browsers. Everything seems to be functioning properly, except for the fact that the parent div containing the 100% width divs always appears around 5 pixels too tall. This is causin ...

csshtmlwidth

Tables lacking borders where rowspans are present

I'm currently using Firefox and have the following code snippet: html, body { width: 100%; height: 100%; } * { box-sizing: border-box; } body { padding-left: 20px; padding-right: 20px; } .visitentabelle { border: 2px solid black; ...

htmlcss