Исправить angular checkBox

Question

This UI is produced by following code ....means checkboxes are not aligned properly . They are being displayed on extreme left and extreme right .

   ИЛИ     

и мне нужен UI , как показано на изображениях ниже Мне нужно выровнять флажок по с <rule> как с кодом введите описание изображения здесь

если я поменяю код

<mat-checkbox></mat-checkbox>
<rule></rule>

на

<mat-checkbox>
   <rule></rule>
</mat-checkbox>```

then entire rule becomes clickable..means any where click on rule , does the checkbox check and uncheck , which i do not want to

Answer 1

Вы можете использовать angular гибкий макет

импорт {FlexLayoutModule} из '@ angular / flex-layout';

<div fxLayout="row" fxLayoutGap="20px">
    <div fxFlex="50px">    
        <mat-checkbox></mat-checkbox>
    </div>
    <div fxFlex>
        <rule></rule>
    </div>
</div>