How do I make multiple rows out of my ngFor Data? - html

Question

In looping through my data, I'd like to have the "app-system" components displayed in even rows across the screen. When I try to put it in a table and then in a row, of course it only creates one row rather than multiple rows with the data.
Here's an image of what its doing currently https://imgur.com/a/O0MjBES
I have to scroll down to see all 190 items in the row.
I've thought about creating another ngFor loop of rows to apply to the data, but I can't quite figure out how. I'm unable to apply the answers I've tried to research to my project due to my lack of experience.
Here's my template that grabs my "app-system" component and loops through all of the data. It currently shows in one LONG row down the page:
Here is the template for the app-system component that is being copied over, the buttons need to be split into seperate rows. The popup box opens when you click one of the buttons.
<div class="section-container">
<div class="section-container">
<table>
<div *ngFor="let system of systemList | paginate: { itemsPerPage: 190,
currentPage: p }; let i = index">
<app-system [systemInput]="system"></app-system>
</div>
</table>
<div class="pagination section-container card-deck">
<pagination-controls (pageChange)="p = $event"></pagination-controls>
</div>
</div>
```<div class='card mb-1 shadow button-background'>
<div class= "popup-box">
<popup #popup>
<p *ngIf="systemInput.AMStatus; else showAMInvalid"> Anti-Malware Version: Current</p>
<ng-template #showAMInvalid>
<p style="background-color:yellow; ">Anti-Malware Version: Needs Update</p>
</ng-template>
<p *ngIf="systemInput.BLStatus; else showBLInvalid">Bitlocker Status: Active</p>
<ng-template #showBLInvalid>
<p style="background-color:yellow; ">Bitlocker Status: Inactive</p>
</ng-template>
<p *ngIf="systemInput.FirewallRullStatus; else showFirewallRuleInvalid"> Firewall Rules: Applied</p>
<ng-template #showFirewallRuleInvalid>
<p style="background-color:yellow; ">Firewall Rules: Not Applied</p>
</ng-template>
<p *ngIf="systemInput.FirewallContentStatus; else showFirewallContentInvalid"> Firewall: Enabled </p>
<ng-template #showFirewallContentInvalid>
<p style="background-color:yellow; ">Firewall Status: Disabled</p>
</ng-template>
<p *ngIf="systemInput.SCCMStatus; else showSCCMStatusInvalid"> SCCM Status: Running</p>
<ng-template #showSCCMStatusInvalid>
<p style="background-color:yellow; ">SCCM Status: Not Running</p>
</ng-template>
<p *ngIf="systemInput.MSBaselineStatus; else showMSBaselineInvalid"> Microsoft Standards: Met</p>
<ng-template #showMSBaselineInvalid>
<p style="background-color:yellow; ">Microsoft Standards: Not Met</p>
</ng-template>
<p *ngIf="dateCheck() == true; else showDateInvalid"> Last Update: {{systemInput.UpdatedDate | date}}</p>
<ng-template #showDateInvalid>
<p style="background-color:yellow; ">Last Update: {{systemInput.UpdatedDate | date}}</p>
</ng-template>
<p *ngIf="systemInput.USBStatus; else showUSBInvalid">Removable Storage: Disabled</p>
<ng-template #showUSBInvalid>
<p style="background-color:yellow; ">Removable Storage: Enabled</p>
</ng-template>
</popup>
</div>
<button (click)="ClickButton()" [ngClass]="{
'btn buttonGood':isValid(),
'btn buttonDateAlert':isValid()=='datewarning',
'btn buttonAlert':isValid()==false
}">{{systemInput.hostname}}</button>
</div>
export interface Ipcidata {
id: Int16Array;
hostname: string;
AMStatus: boolean;
BLStatus: boolean;
FirewallRullStatus: boolean;
FirewallContentStatus: boolean;
SCCMStatus: boolean;
MSBaselineStatus: boolean;
UpdatedDate: Date;
USBStatus: boolean;
}

Answer 1

You're saying row, but you're thinking of column. You should use flex/grid for that.
You should do what you're trying with css.
On container element do:
.container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
width: 500px; // Or whatever
height: 500px; // Or whatever
}

Answer 2

Try changing the <div> to a <tr> element
<div class="section-container">
<table>
<tr *ngFor="let system of systemList | paginate: { itemsPerPage: 190,
currentPage: p }; let i = index">
<app-system [systemInput]="system"></app-system>
</tr>
</table>
<div class="pagination section-container card-deck">
<pagination-controls (pageChange)="p = $event"></pagination-controls>
</div>

Answer 3

All you should need is ngIf
<div class="section-container">
<table>
<div *ngFor="let system of systemList | paginate: { itemsPerPage: 190,
currentPage: p }; let i = index">
<app-system *ngIf="i % 2 == 0" [systemInput]="system"></app-system>
</div>
</table>
<div class="pagination section-container card-deck">
<pagination-controls (pageChange)="p = $event"></pagination-controls>
</div>
</div>
All we do is use a modulus expression to only show the even rows (The inverse would be i % 2 != 0)
app-system is a child element however, so there will be empty parent divs...