HTML markup for the parent component using editable table

page-b7.component.html

<mat-drawer-container class="modhyobitto-table-drawer-container">
            <mat-drawer mode="over" position="end" #table_update_drawer
                [opened]="is_table_being_updated"
                disableClose="true">
                <section class="table-update">
                    <form class="table-update__form"
                        [formGroup]="table_update_form"
                        (ngSubmit)="updateTableData()">
                        <header class="table-update__header">
                            <h2 class="h3">{{is_new_row_being_added? 'Add New' : 'Edit'}} Row</h2>
                        </header>
                        <div class="table-update__fields">
                            <div class="row">
                                <div class="col-6">
                                    <app-modhyobitto-form-field
                                        [parent_FG]="table_update_form"
                                        control_name="a"
                                        label="Column A">
                                    </app-modhyobitto-form-field>
                                </div>
                                <div class="col-6">
                                    <app-modhyobitto-form-field
                                        [parent_FG]="table_update_form"
                                        control_name="c"
                                        label="Column C">
                                    </app-modhyobitto-form-field>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <app-modhyobitto-form-field
                                        [parent_FG]="table_update_form"
                                        control_name="b"
                                        label="Column B">
                                    </app-modhyobitto-form-field>
                                </div>
                            </div>
                        </div>
                        <footer class="table-update__footer">
                            <div class="row flex-column-reverse flex-sm-row">
                                <div class="col-12 col-sm-6">
                                    <button matRipple
                                        class="secondary-button mt-3 mt-sm-0"
                                        type="button"
                                        (click)="is_table_being_updated = false">Dismiss</button>
                                </div>
                                <div class="col-12 col-sm-6">
                                    <button matRipple
                                        class="primary-button"
                                        type="submit"
                                        [disabled]="!table_update_form.valid">Save</button>
                                </div>
                            </div>
                        </footer>
                    </form>
                </section>
            </mat-drawer>
            <mat-drawer-content>
                <app-modhyobitto-table 
                    [table_config]="table_config"
                    (onRowAdd)="addNewRow()" 
                    (onRowEdit)="editRow($event)">
                </app-modhyobitto-table>
            </mat-drawer-content>
        </mat-drawer-container>