How to dynamically hide button in Angular7 FormArray fields?

Question

I have got a dynamic table that can add rows. How do I dynamically hide the trash button in col 1, col 2, col 3 when the trpNo is not null and unhide the trash button in col4 when the trpNo is null?

I am using a form array to display the data and have a method to dynamically insert the rows in a table. I am unable to take control of each row to hide/unhide the button

In the past, I have tried to initially set the button as hidden in HTML and then tried to take the control from .ts file (typescript) but I was not successful

<form [formGroup]="Connectedform">
    <table>
        <tr formArrayName="Connectedlst" *ngFor="let ConnectedASN of ConnectedASNlst; let transportNoExist = true;">
            <td>
               <button class="btn btn-sm" type="button" [hidden]="!transportNoExist" >
                   <i class="fa fa-trash"></i>
                </button>
            </td>
            <td class=" form-control-sm">
                <div>
                    TransportNo:<b>{{ConnectedASN.trpNo}}</b>
                </div>
                <div>
                    Supplier:
                    <b>{{ConnectedASN.supplier}}</b>
                </div>
            </td>
        </tr>
    </table>
</form>

I expect to dynamically hide the trash button in col 1, col 2, col 3 when the trpNo is not null?

Answer 1

try this way *ngIf="ConnectedASN.trpNo" in case of trpNo is falsy the button will be hidden

<form [formGroup]="Connectedform">
    <table>
        <tr formArrayName="Connectedlst" *ngFor="let ConnectedASN of ConnectedASNlst;>
            <td>
               <button class="btn btn-sm" type="button" *ngIf="ConnectedASN.trpNo" >
                   <i class="fa fa-trash"></i>
                </button>
            </td>
            <td class=" form-control-sm">
                <div>
                    TransportNo:<b>{{ConnectedASN.trpNo}}</b>
                </div>
                <div>
                    Supplier:
                    <b>{{ConnectedASN.supplier}}</b>
                </div>
            </td>
        </tr>
    </table>
</form>