Angular Modal Example: Build Angular 6|7 Material Form and Modal Dialog

In this tutorial you'll learn about Angular Modals and forms by example. We'll be using Angular Material and Angular 7 version.

In this tutorial, you'll build an example login UI with a form and dialog styled with Angular Material.

We assume you have created an Angular 6|7 project using Angular CLI 6|7. Otherwise, you can install Angular CLI from npm using:

$ npm install @angular/cli -g

Next, you can generate your project using:

$ ng new mat-login-ui

Adding Angular Material

You can then navigate inside your project's folder and use the ng add command to install and setup Angular Material in your project:

$ cd mat-login-ui
$ ng add @angular/material

Next, you need to add the modules for the Material components you'll be using in your project. Open the src/app/app.module.ts file and add these imports:

import { MatButtonModule, MatCardModule, MatLabelModule, MatFormFieldModule } from '@angular/material';

Next, you need to add these modules in the imports array of your main module:

imports: [ /*...*/, MatInputModule, MatButtonModule, MatCardModule, MatLabelModule, MatFormFieldModule],

Creating the Login Component

Next, you need to create the login component and style it with Material Design. In your terminal, run the following command:

$ ng g c login

Adding a Card Container

Now, open src/app/login/login.component.html file and add a Material card container:

    <mat-card>
    <mat-card-header>
        <mat-card-title>Example Login Form</mat-card-title>
    </mat-card-header>
        <mat-card-content>
        <!-- This is where you need to add your login form -->
        </mat-card-content>

A <mat-card> component can be used as a container for text, forms and photos. You can check out the docs for more information.

Adding an HTML Form

In the body of the card container, add a form:

    <form>
        <!-- Form fields -->
    </form>

Next, we need to provide input fields for getting the email and password from the user:

<mat-form-field>
<input  matInput  placeholder="your email" [(ngModel)]="email"  type="email" name="email"  required>
</mat-form-field>
<mat-form-field>
<input  matInput  placeholder="your password" [(ngModel)]="password"  type="password"  name="password"  required>
</mat-form-field>

First, we use <mat-form-field> to wrap each field of the form, next use matInput directive with regular <input> tags to create input fields with Material look and feel.

The <mat-form-field> component provides wrapped fields with features such as the underline, floating label, and hint messages.

You can wrap the following elements in <mat-form-field>:

Next, we finish building the login UI by adding a button:

        <mat-card-actions>
            <button  mat-raised-button (click)="login()"  color="primary">Login</button>
        </mat-card-actions>
    </mat-card>

You can create Material buttons using the regular HTML tags such as <button> and <a> tags and applying mat-button ormat-raised-button directives. For more more information check out the docs.

Using a Modal Dialog for Displaying Error Messages

Angular Material provides the MatDialog service for displaying modal dialogs. You can create a dialog using an Angular component so first create the component using:

$ ng g c message

Next, open the src/app/message.component.ts file and update it accordingly:

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

import {MatDialogRef, MAT_DIALOG_DATA, MatDialog} from  '@angular/material';

@Component({
templateUrl:  'message.component.html'
})
export  class  MessageComponent {
    constructor(private  dialogRef:  MatDialogRef<MessageComponent>, @Inject(MAT_DIALOG_DATA) public  data:  any) {
    }
    public  closeMe() {
        this.dialogRef.close();
    }
}

When this component is created with the MatDialog service, a MatDialogRef<MessageComponent> will be injected which references the opened modal dialog so you can use it to close the dialog.

We also need to pass data between the dialog and the component. You can simply use the MAT_DIALOG_DATA injection token and the @Inject() decorator to get dialog data in your component.

Next open the src/app/message.component.html and update it accordingly:

<h1  mat-dialog-title>Message</h1>
    <mat-dialog-content>  </mat-dialog-content>
<mat-dialog-actions>
    <button  mat-raised-button (click)="closeMe()">Close</button>
</mat-dialog-actions>

We use the mat-dialog-title combined with the <h1> tag to add the dialog title, the<mat-dialog-content> directive for adding the content area of the dialog and the <mat-dialog-actions> for adding the dialog action buttons.

Opening the Modal Dialog

For testing the modal dialog, we'll add the login() method to our login component which will open the message dialog to display an error. Open the src/login/login.component.ts file and update it accordingly:

import { Component, OnInit } from  '@angular/core';
import { MatDialog, MatDialogRef } from  '@angular/material';

// .. other imports

@Component({
// component metadata
})
export  class  LoginComponent{

    public  email:  string  =  "";
    public  password:  string  =  "";


    constructor(private  dialog:  MatDialog, private  router:  Router) { }
    login(){
        if(this.email  ===  "email@email.com"  &&  this.password  === "p@ssw0rd")
        {
            this.router.navigate(['success']);
        }
        else
        {
            this.dialog.open(MessageComponent,{ data: {
            message:  "Error!!!"
            }});
        }
    }
}

You import the MatDialog service and inject it via your component's constructor and then you call the open() method of the injected instance to open the message modal. The method takes a config object with a data attribute that contains data that you need to pass to the dialog's component.

Conclusion

In this tutorial, you have created a simple login UI with an HTML form, a modal dialog and Angular Material styles.


comments powered by Disqus