Display Component Dynamically As A Modal Popup Using Material Dialog In Angular 6

Introduction

Usually, in our web applications, we need to display a confirmation popup to the user before allowing him/her to delete any record from the table. When the user allows the application to delete the record by clicking on the yes button, the logic behind deletion executes and deletes the record. Just think about if your application does not display any confirmation popup to the user and he/she deletes the records accidentally, what will happen? It’s always a best practice to show a confirmation popup while developing an application.

Through this article, we will cover the following topics,

• What are entry Components in Angular?
• How to show Confirmation Dialog before deleting a record from the table?
• How to pass a data object to pop up in case we need to show any data over it?

Output

Application with Modal popup will look like below,

 

 

Implementation

Before implementation, you need to know the prerequisites. First, you need to setup Angular Material with your Angular application. Just go to this official guide, install necessary packages for Angular Material and set up the application in order to use Angular Material Components.

Import and export the necessary modules from material.module.ts and add this material module in imports array of main module; i.e. app.module.ts in my case. For your reference, I have attached the material module file with this article.

Now we will build an Angular component (user-posts.component.ts) and a service (post.service.ts) where we will call JSONPlaceHolder API to get posts data and will show the data as a list in user-posts component view. A list displaying records will have two more buttons (Delete & Update). On clicking on Delete button, the user will see a confirmation popup with two options (YES & NO) just to allow application whether the selected record will be deleted from the list or not.

Using the code

Component Template (user-posts.component.html)

<ul class="list-group">
  <li *ngFor="let post of userPosts" class="list-group-item">
    <button (click)="updatePost(post)" class="btn btn-default btn-sm">Update</button>
    <button (click)="deletePostConfirm(post)" class="btn btn-default btn-sm">Delete</button>
    <a [routerLink]="['/userposts',post.id]">{{post.id}}</a> - {{post.title}}
  </li>
</ul>

Post Service (post.service.ts)

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable, throwError } from "rxjs";
import { delay, catchError } from "rxjs/operators";
import { IPost } from "../Resolver/user-posts.resolve";

import { AppError } from "./../common/app-error";
import { NotFoundError } from "../common/not-found-error";

@Injectable({
  providedIn: "root"
})
export class PostService {
  private url = "http://jsonplaceholder.typicode.com/posts";

  constructor(private http: HttpClient) {}

  getPosts(): Observable<IPost[]> {
    return this.http.get<IPost[]>(this.url).pipe(delay(1000));
  }

  deletePost(id) {
     return this.http.delete(this.url + "/" + id).pipe(
       catchError((err: Response) => {
         if (err.status === 404) return throwError(new NotFoundError(err));
         return throwError(new AppError(err));
       })
     );
   }
}

In the above service, I have configured the injector with provider at the service level itself using the provided metadata options of Injectable decorator. However we can configure injectors with providers at three different levels of the Angular application. For more details, read here.

Now we will create a confirmation component that will display as a Modal popup when we will click on Delete button.

Delete Confirmation Component Code (detete-confirmation.component.ts)

import { Component, Inject } from '@angular/core';

@Component({
    selector: 'app-delete-confirmation',
    template: `
        <h1 mat-dialog-title>Are you want to delete?</h1>
        <mat-dialog-actions>
            <button mat-raised-button [mat-dialog-close]="true">YES</button>
            <button mat-raised-button [mat-dialog-close]="false">NO</button>
        </mat-dialog-actions>
    `
})
export class DeleteConfirmationComponent{
    constructor(){
    }
}

Component Code (user-posts.component.ts)

import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { MatDialog } from '@angular/material';

import { PostService } from "./../services/post.service";
import { DeleteConfirmationComponent } from './detete-confirmation.component';
import { AppError } from "./../common/app-error";
import { NotFoundError } from "../common/not-found-error";
import { IPost } from "./../Resolver/user-posts.resolve";

@Component({
  selector: "app-user-posts",
  templateUrl: "./user-posts.component.html",
  styleUrls: ["./user-posts.component.css"]
})
export class UserPostsComponent implements OnInit {
  userPosts: IPost[] = [];

  constructor(
    private postService: PostService,
    private route: ActivatedRoute,
    private dialog: MatDialog
  ) {}

  ngOnInit() {
    this.userPosts = this.route.snapshot.data.userposts;
    console.log(this.userPosts.length);
  }

  deletePostConfirm(post) {
    const dialogRef=this.dialog.open(DeleteConfirmationComponent);  //Open MatDialog and load component dynamically

    //Need to subscribe afterClosed event of MatDialog
    dialogRef.afterClosed().subscribe(confirmresult=>{
      console.log(confirmresult);
      if(confirmresult){            //if dialog result is yes, delete post
        this.deletePost(post);
        console.log("Delete confirm is approved by user.");
      }
      else{                        //if dialog result is no, DO NOT delete post
        console.log("Delete confirm is cancelled by user.");
      }
    })
  }

  private deletePost(post){
    this.postService
      .deletePost(post.id)
      //this.postService.deletePost(300)
      .subscribe(
        response => {
          let indexOfItem = this.userPosts.indexOf(post);
          this.userPosts.splice(indexOfItem, 1);
          console.log(this.userPosts.length);
        },
        (error: AppError) => {
          if (error instanceof NotFoundError) {
            console.log("This post has already been deleted.", error);
          } else {
            console.log("Unexpected Exception occurred: ", error);
          }
        }
      );
  }
}

In above component code, I have imported MatDialog service from @angular/material package and injected it into constructor to get its instance. Now when user clicks on the Delete button, previously created component (delete-confirmation.component.html) will be displayed as Modal popup with two options (yes & no) with the help of open method of MatDialog service.

Run Application (ng serve)

Now run the application to see the desired output using Angular CLI ng serve command. Click on the delete button to display the confirmation popup.

What happens when you click on Delete button? Nothing displays on the screen. Let’s go inside the console window (press F12) and see the error.

 

Before resolving the above error, let’s understand the Entry Components in Angular.

Entry Components in Angular

Entry Component in an Angular application is any component that is either a bootstrapped root component (listed in the bootstrap array of @NgModule) or a component you include in a route definition and Angular loads these type of components imperatively.

There are mainly two main types of entry components,

• A component that is bootstrapped by Angular inside @NgModule decorator
  

  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule
      BrowserAnimationsModule,
      MaterialModule
    ],
    providers: [],
    bootstrap: [
      AppComponent                    //A bootstrapped entry component
    ]
  })
  export class AppModule { }

• A component that you include in a route definition
  

  @NgModule({
    imports: [
      BrowserModule
      BrowserAnimationsModule,
      MaterialModule,
      RouterModule.forRoot([
        {
          path: 'userposts',
          component: UserPostsComponent       // Another bootstrapped component
        }
      ])
    ],
    bootstrap: [
      AppComponent                // A bootstrapped root component
    ]
  })
  export class AppModule { }

entryComponents array in @NgModule decorator

When we need to bootstrap or dynamically load a component by type imperatively, we must add that component to entryComponents array of @NgModule decorator explicitly. Behind the scene, Angular also automatically adds all the components listed in the @NgModule bootstrap array and the components those in route definitions to the entryComponents array.

Let’s come to the above error in the console now…

What is explained about entry components above, also indicated by the error in the console window? The error is –

ERROR Error - No component factory found for DeleteConfirmationComponent. Did you add it to @NgModule.entryComponents?

Since the component DeleteConfimationComponent is bootstrapped or loaded dynamically inside the Material Dialog, so we need to add it to entryComponents array of the @NgModule decorator to resolve the above error. Let’s add it and run the application again.

@NgModule({
  declarations: [
    AppComponent,
    DeleteConfirmationComponent
    ...
  ],
  imports: [
    BrowserModule,
    HttpClientModule
    ...
  ],
  bootstrap: [
    AppComponent
  ],
  entryComponents:[DeleteConfirmationComponent]      //Dynamically loaded component added to entryComponents array
})
export class AppModule { }

Now application with Modal Popup works fine as shown above output.

Passing Data to Modal Popup

What if you want to pass any data to your Modal Popup and display on it? You can pass a data object to your popup easily. In this case, I will pass the record user id to pop up and display it on the popup with a confirmation message. This is beneficial when we dynamically load a component with multiple controls for displaying a lot of dynamic information in a modal popup.

Let’s pass the data object to modal popup and display record user id there with the help of the following steps –

1. Import MAT_DIALOG_DATA from @angular/material, inject in the constructor of DeleteConfirmationComponent and access data inside the component template.
   

   import { Component, Inject } from '@angular/core';
   import {MAT_DIALOG_DATA} from '@angular/material';
   
   @Component({
       selector: 'app-delete-confirmation',
       template: `
           <h1 mat-dialog-title>Are you want to delete?</h1>
           <mat-dialog-content>User ID is {{data.record_id}}.</mat-dialog-content>
           <mat-dialog-actions>
               <button mat-raised-button [mat-dialog-close]="true">YES</button>
               <button mat-raised-button [mat-dialog-close]="false">NO</button>
           </mat-dialog-actions>
       `
   })
   export class DeleteConfirmationComponent{
       constructor(@Inject(MAT_DIALOG_DATA) public data:any){
       }
   }

2. Pass data object as second parameter of open method of MatDialog service in the user-posts.component.ts.
   

   deletePostConfirm(post) {
       console.log(post.userId);
       //Open MatDialog and load component dynamically
       const dialogRef = this.dialog.open(DeleteConfirmationComponent, {               //Pass data object as a second parameter
         data: {
           record_id: post.userId
         }
       });
       //Need to subscribe afterClosed event of MatDialog
       dialogRef.afterClosed().subscribe(confirmresult => {
         console.log(confirmresult);
         if (confirmresult) {
           //if dialog result is yes, delete post
           this.deletePost(post);
           console.log("Delete confirm is approved by user.");
         } else {
           //if dialog result is no, DO NOT delete post
           console.log("Delete confirm is cancelled by user.");
         }
       });
     }

Now run the application to see the expected result.

Other Posts on Angular

Check the below post to help out with how Page Loader is implemented in an Angular application.

• How to create modern page loader using Router Events in Angular 6?

Check the below post to help out with how to load data before component load using Router Resolve API in an Angular application.

• Loading Data Before Component Load in Angular 6 application?

Summary

Through this article, we learned what entry components in Angular are and how to load components dynamically in the material dialog.

Thanks a lot for reading. I hope you liked this article. Please share your valuable suggestions and feedback. Write in the comment box in case you have any questions. Have a good day!