Mat-Dialog Angular

Issue

I'm creating a Dialog that when I selected a value it will populate to the input fields but now I'm trying to create a hidden button inside in FormArray that will show up when I selected true, but if i selected False it will not show the hidden button how to achieved that?

here's what i done so far

https://stackblitz.com/edit/mat-dialog-example-wvsgaj

Solution

I have forked your sample. See this. https://stackblitz.com/edit/mat-dialog-example-gheonh

Added a showButton property in item.

item(): FormGroup {
  return this.fb.group({
    qty: [10],
    total: [],
    showButton: false, // here
  });
}

Then set this property in afterClosed.

dialogRef.afterClosed().subscribe((result) => {
  const showButton = result.symbol;
  (this.fg.get('Info') as FormArray)
    .at(index)
    .get('showButton')
    ?.patchValue(showButton);
});

And in html, toggle show or hide with this value.

<button
  mat-raised-button
  color="primary"
  class="row"
  *ngIf="Info.get('showButton').value"
>
   TriggerButton
</button>

Answered By - N.F.