close modal on button click

Question

we are developing cms for a website in that i have listed all post in datatable i want to delete that post when user will click on delete button

i have called my service on that button row gets deleted from database but on frontend its not loading lattes result and my modal is not closing please see below images, when i click on delete button modal appears

when i click on yes,delete button i have called service that deletes row from database its working fine, what i am facing is modal is not getting closed and that table is not reloading its data,

i want to know is there any way to refresh specific components in angular 5? or how can i deal with this

please let me know if you want any inputs from my side,

please give me your valuable suggestions

all things are working now i am having just a little problem that my modal is not closing on button click

following i my code

 <div class="example-header">
    <mat-form-field>
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    </mat-form-field>
</div>

<div class="example-container mat-elevation-z8">

    <mat-table [dataSource]="dataSource" matSort>

        <!-- ID Column -->
        <ng-container matColumnDef="post_title">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Post Title </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.post_title}} </mat-cell>
        </ng-container>
<!-- 
        <ng-container matColumnDef="post_description">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Post Description </mat-header-cell>
            <mat-cell *matCellDef="let row" [innerHTML]="row.post_description"></mat-cell>
        </ng-container> -->

        <!-- Progress Column -->
        <ng-container matColumnDef="category_title">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Post Category </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.category_title}} </mat-cell>
        </ng-container>

        <!-- Name Column -->
        <ng-container matColumnDef="status">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Post Status </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.status}} </mat-cell>
        </ng-container>

        <!-- Color Column -->
        <ng-container matColumnDef="location">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Post Location </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.location}} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="buttons">
            <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
            <mat-cell *matCellDef="let row">
                <button mat-button [routerLink]="['../update-post/',row.post_id]">
                    <mat-icon>edit</mat-icon>
                </button>
                 <button mat-button (click)="open(content)">
                    <mat-icon>delete</mat-icon>
                </button>
                <ng-template #content let-c="close" let-d="dismiss">
                        <div class="modal-header">
                          <h4 class="modal-title">Confirm</h4>
                          <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
                            <span aria-hidden="true">&times;</span>
                          </button>
                        </div>
                        <div class="modal-body">
                          <p>Are you sure you want to delete the post?</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-dark"  data-dismiss="modal"  (click)="deletePost(row.post_id)">Yes, Delete</button>
                            <button type="button" class="btn btn-outline-dark" (click)="c('Close click')">No</button>
                        </div>
                      </ng-template>
            </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;">
        </mat-row>
    </mat-table>

    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

Answer 1

in the button event click when we call the service of delete record after successful deletion in success block you write below code to hide your model popup..

$('#myModal').modal('show'); //#myModal is id of your model

and after that call the method which are bind your grid i hope it will be work for you