Using the Angular flexlayout library in angular 7/8, I am trying to align 4 buttons on the left side (flex-start) and two checkboxes on the right side (flex-end) at the same level. I would prefer to achieve this layout using the flexlayout Angular library.
I have attempted the code provided below. Additionally, I tried placing the elements within two mat-card-action components, but they stacked on top of each other instead of being on a single line.
<mat-card-actions fxLayoutGap="1em">
<button mat-raised-button color="accent" (click)="newRows()">Add</button>
<button [disabled]="selectedRow != undefined && selectedRow.isBevoorschotting" mat-raised-button color="accent"
(click)="updateRows()">Update</button>
<button mat-raised-button color="warn" (click)="deleteRows()" [disabled]='!isAdmin'>Delete</button>
<button mat-raised-button color="accent" (click)="refresh(0)">Refresh</button>
<mat-checkbox (change)="onclickMutatieVelden()" [(ngModel)]="toonMutatievelden">
<p>Show Mutation Fields...</p>
</mat-checkbox>
<mat-checkbox (change)="onclickMaakInactief()" *ngIf="selectedRow" [(ngModel)]="!selectedRow.isActief">
<p>Make Inactive...</p>
</mat-checkbox>
</mat-card-actions>
Can anyone provide assistance with this issue?