I am using angular 17.

I have the component users-edit who has two components:

<!-- users-edit.component.html -->
<div class="full-width">
    <app-users-get-data
        (usersFetched)="onUsersFetched($event)"
        (submitPressed)="handleSubmitPressed($event)"
    >
    </app-users-get-data>
</div>

<div class="full-width" id="table"> 
    <app-users-show-table 
        [users]="users" 
        [submitted]="submitted"
    > 
    </app-users-show-table>
</div>

One gets the data, the other receives that data and shows a table with a button:

<tr *ngFor="let user of users">
    <td>{{ user.identificationNumber }}</td>
    <td>{{ user.names }}</td>
    <td>{{ user.surnames }}</td>
    <td>{{ user.userMaster ? 'Yes' : 'No' }}</td>
    <td *ngIf="action === 'edit'">
        <button class="btn btn-success btn-sm" (click)="editUser(user)">
            {{ 'EDIT' | translate }}
        </button>
    </td>
    <td *ngIf="action === 'delete'">
        <button class="btn btn-danger btn-sm" (click)="confirmDeleteUser(user)">
            {{ 'DELETE' | translate }}
        </button> 
    </td>  
</tr>

Is it possible that when the button EDIT is clicked, the two components are hiden and a another component:

 <app-users-edit-action> 

appears?

Maybe with some ngIf and a variable and some communication between the inner component and his father.

If that is not possible, what you suggest to show a form to edit the registry?

I triend async but nothing happend. The components are still there.

Signals create weird things