Angular Material Modal

Updated April 9, 2023

Definition on Angular Material Modal

Angular material modal is very easy to implement, by using the AngularJS framework, this framework is providing easy way for using modals in our project. Angular material modal is helping us to construct attractive UX and UI web pages which was functional and consistent. In angular material modal is important term and it contains the common meaning. Angular material modal is define in piece of code or functionality of application.

Overviews Angular Material Modal

There are multiple angular material modal is available in AngularJS. The bottom sheet angular material modal is used to open the material design panels of the screen bottom. This panel will intended for the interaction on the mobile devices where they can used an alternative of the menus and dialogs. We can open the bottom sheet by calling the method of open method by using component is loaded into the object of optional config. We can also use dialog and snackbar modal in AngularJS. Dialog modal is very useful and important modal in AngularJS to define the popups and modals.

Angular Material Modal Popup

• Below is the angular material modal popup available in AngularJS are as follows. Dialog is a very important popup modal in AngularJS.
• Bottom sheet
• Dialog
• Tooltip
• Snackbar
• We can use the bottom sheet service in a material design. If suppose we want to use bottom sheet we need to use MatBottomSheet.
• After using open method in a bottom sheet the open method will returning the instance of MatBottomSheetRef are as follows.

Code –

const bottomSheetRef = bottomSheet.open (SocialShareComponent, {

ariaLabel : ‘Angular material modal’ } )

• The MatBottomSheetRef is a reference to the opened sheet and used to event subscription. The component is contained inside in a sheet which was inject in MatBottomSheetRef

Code –

bottomSheetRef.afterDismissed ().subscribe (() => {
     console.log ('Angular material modal');
} );
bottomSheetRef.dismiss ();

• The MatDialog and MatBottomSheet will initiating the component at the run time. The angular compiler in angular modal will needs extra information for creating ComponentFactory. Any component which was added inside into the bottom sheet will added into the entryComponent module are as follows.

Code –

@NgModule({
    imports: [
      MatBottomSheetModule
    ],
    declarations: [
      AppComponent,
      BottomSheet
],
    entryComponents : [
        BottomSheet
],
    Providers : [],
    Bootstrap : [AppComponent]
})
export class AppModule {}

• The MatDialog service is used to open the dialog and design style of material. We are opening the dialog by using the open method. In dialog the open method will returning the instance of MatDialogRef are as follows.

Code –

let dialogRef = dialog.open (component, {
     height: '200px',
     width: '400px',
    });

• Basically MatDialogRef is providing an opened dialog which is used to close dialog and receive the notification when we closing the dialog.

Code –

dialogRef.afterClosed ().subscribe (result => {
console.log (`Dialog result: ${result}`);
});
dialogRef.close ('Angular Material Modal');

• Component will be created in a MatDialog and injecting the MatDialogRef which was used to close the dialog which was they contained. Below example shows the result value which was forwarded afterClosed promise.

Code –

@Component ({})
export class modal {
    constructor (public dialogRef: MatDialogRef) { }
    closeDialog () {
         this.dialogRef.close ('Angular material modal');
    } }

• We use MatSnackBar service to display the notifications of snack bar. Snack bar will contains the message of string in a given component.

Code –

let snackBarRef = snackBar.open ('Angular Material Modal');
let snackBarRef = snackBar.open ('Angular Material Modal', 'Undo');

• We can dismiss the snap bar manually by using dismiss method and MatSnackBarRef will returning the call to open method. The snack bar is opened in single time. If suppose we have opened new snackbar then still we have seeing previously message then old message automatically dismissed by using dismiss method. Below example shows snackbar in angular material popup are as follows.

Code –

snackbar.open ('Angular material modal', 'Undo', {
     duration: 1000
  });

Angular material modal Example

• Below is the example of angular material modal are as follows. To configure the angular material modal example we need to install angular material CLI in our system. Below example shows that to install angular material CLI are as follows.
• To configure angular material modal we need to install the angular CLI in our system. We can install the angular CLI by using npm command.

npm install -g @angular/cli

• After installing the angular CLI in this step we are creating the workspace for our angular project. We are creating workspace name as angular-material-modal. Below example shows to create workspace of our angular project are as follows. We are adding angular routing this option will pop up at the time of creating a workspace. Also we are selecting the stylesheet format as CSS.

ng new angular-material-modal

• After creating the workspace of angular material modal project in this step we are installing the angular CDK, angular animations and angular material are as follows.

npm install @angular/material –save

• After installing angular material, cdk and animation in this step we are adding the same in our project are as follows. Below example shows add the angular material library are as follows.

cd angular-material-modal/

ng add @angular/material

• Now we are creating material.module.ts file. In that we are importing the angular material modal are as follows.

Code –

import { NgModule } from '@angular/core';
…….
})
export class MaterialModule {}

• Now we are creating the app.component.ts file are as follows.

Code –

import { Component, Inject } from '@angular/core';
…….
export class AppComponent {
}

• Now we are creating the modal.component.html file are as follows.

Code –

<h1 mat-dialog-title> Angular {{data.name}}</h1>
….
</div>

Conclusion

The bottom sheet angular material modal is used to open the material design panels of the screen bottom. Angular material modal is very easy to implement, by using the AngularJS framework, this framework is providing easy way for using modals in our project.

Recommended Articles

This is a guide to Angular Material Modal. Here we discuss the Definition, overviews, examples with code implementation, respectively. You may also have a look at the following articles to learn more –

1. Angular Material Dropdown
2. Angular Material Tooltip
3. Angular Material NPM
4. Angular material login form