Is there a way to achieve the following design? I need to place a textfield next to the last checkbox, but right now, the last checkbox is not aligned with the rest. Does anyone have an idea on how to make this possible? Would using CSS solve the issue?
The Design I am Trying to Implement
This is my current output based on the code provided below. As you can see, the last checkbox is positioned too far from the others.
HTML Code:
<ul>
<li *ngFor="let contigency of contingencies;let i = index;">
<mat-checkbox
class="checkbox-margin"
name="contingency"
color="primary"
[checked]="currentSelectedContingency(contigency)"
(change)="changeCurrentContingencies($event,contingency)"
#checkbox
>
<mat-form-field
appearance="fill"
*ngIf="contingency.text === 'Other Contingencies'; else text"
>
<input
[disabled]="!checkbox.checked"
name="otherContingency"
matInput
[(ngModel)]="dealDispositionFormFields.otherContingency"
/>
<span matPrefix *ngIf="dealDispositionFormFields.otherContingency"
>$</span
>
</mat-form-field>
<ng-template #text>
<div class="deal-text-label">{{contingency.text}}</div>
</ng-template>
</mat-checkbox>
</li>
</ul>
#ts snippet code:-
contingencies = [
{id: 1, text: 'Financing Contingency'},
{id: 2, text: 'Site Plan Approval Contingency'},
{id: 3, text: 'Permit Approval Contingency'},
{id: 4, text: 'Tenant Approval Contingency'},
{id: 5, text: 'Other Contingencies'},
]
changeCurrentContingencies(e:any,rowData:any){
if(e.checked){
this.selectedContingencies.push(rowData);
}else {
this.removeSelectedContingency(rowData);
}
}