Angular Modal Example: Build Angular 7/8 Material Form and Modal Dialog

In this tutorial, you'll learn about Angular Modals and forms by example. We'll be using Angular Material with an Angular 8 example.

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 8 project using Angular CLI v8. 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

You'll be imported if would you like to add routing to your project and which stylesheets format you want to use. Choose the desired options for your project and let's continue.

You can serve your project using the following commands:

$ cd mat-login-ui
$ ng serve

Your application will be available from the http://localhost:4200/ address.

Adding Angular Material v8

Open a new terminal and navigate to your project's folder, next run the ng add command to install and set up Angular Material in your project:

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

You also need to configure or disable animations.

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 {MatInputModule} from '@angular/material/input';
import {MatButtonModule} from '@angular/material/button';
import {MatCardModule} from '@angular/material/card';
import {MatFormFieldModule} from '@angular/material/form-field';
import { MatDialogModule } from '@angular/material/dialog';

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

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

Creating the Angular Login Component

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

$ ng generate component login

Adding a Material Card Container

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

    <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 generate component message

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

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

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

@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 example with Angular 8, an HTML form, a Modal dialog and Angular Material styles.

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status