How To Use Emailvalidator Package In Angular?

Last Updated : 23 Aug, 2024

The email validator is a simple and popular npm package used to validate email addresses in JavaScript applications. Integrating it into an Angular application can help users provide valid email addresses. Basically the email validator provides a simple and efficient way to validate the email address. In this article, we explain how to integrate the email-validator npm package into our application with related examples and outputs for reference.

Project Preview

Prerequisites

Steps To Use emailvalidator in Angular

Here we provide a step by step process to use emailvalidator in angular and we provide related example and output and also we provide source code for your reference.

Step 1 : Create Angular Application

For create new angular project. Use below command with project name. Here emailValidatorApp is the project name.

ng new emailValidatorApp

Step 2 : Install email-validator package

Once project is created successfully. Now Install the email validator package by using below command in the project directory.

npm install email-validator

Folder Structure

Dependencies

"dependencies": {
    "@angular/animations": "^18.0.0",
    "@angular/common": "^18.0.0",
    "@angular/compiler": "^18.0.0",
    "@angular/core": "^18.0.0",
    "@angular/forms": "^18.0.0",
    "@angular/platform-browser": "^18.0.0",
    "@angular/platform-browser-dynamic": "^18.0.0",
    "@angular/platform-server": "^18.0.0",
    "@angular/router": "^18.0.0",
    "@angular/ssr": "^18.0.0",
    "email-validator": "^2.0.4",
    "express": "^4.18.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
}

Step 3 : Design the UI

Once required dependencies are installed now its time to design user interface to validate the given email address. For responsive UI design we use Bootstrap framework as a CDN. And we integrate CDN links with index.html of the Angular Project.

index.html

HTML

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>EmailValidatorApp</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
    <app-root></app-root>
</body>

</html>

Once Bootstrap Framework is integrated. Now we start the UI design for validating the email. Below we provide the source code for your reference.

App Component

Once Basic User Interface is completed Now we need develop the logic for validating the given email by using email-validator npm package.Below we provide that source code for your reference. In email-validator npm package we have a method called validate(). This method take email address as input.

HTML

<!--src/app/app.component.html-->
<div class="p-5">
    <div class="container p-4 bg-success mt-5" style="max-width: 600px;">
        <h2 class="text text-white mb-4 text-center">Email Validator</h2>
        <input class="form-control mt-5" type="email" [(ngModel)]="email" placeholder="Enter your email">
        <button class="btn btn-light mt-3 text-success" style="font-weight: 700;" 
                (click)="validateEmail()">Validate
            Email</button>
        <p *ngIf="isValidEmail === true" class="text text-white mt-3 mb-2">Email is valid!</p>
        <p *ngIf="isValidEmail === false" class="text text-white mt-3 mb-2">Email is invalid!</p>
    </div>
</div>

JavaScript

//src/app/app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import * as EmailValidator from 'email-validator';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet, FormsModule, CommonModule],
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'emailValidatorApp';
    email: string = '';
    isValidEmail: boolean | null = null;

    validateEmail() {
        this.isValidEmail = EmailValidator.validate(this.email);
    }
}

JavaScript

//src/app/app.config.ts
import { ApplicationConfig, provideZoneChangeDetection, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideClientHydration } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
    providers: [
        provideZoneChangeDetection({ eventCoalescing: true }),
        provideRouter(routes),
        provideClientHydration(),
        importProvidersFrom(FormsModule)
    ]
};

Step 4: Run the Application

Once development is completed. Now Its time to run the application by using below command. And the Angular application runs on port number 4200 by default.

ng serve

Output

Class Diagram | Unified Modeling Language (UML)

eswarbe06sp

Improve

Article Tags :