Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

Angular 14 ngx-strength-meter Example to Validate Material Input Password Strength Meter in TS

Posted on February 9, 2023

 

 

Welcome folks today in this blog post we will be using the ngx-strength-meter library to validate material input password strength meter in typescript in browser. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make  a new angular project using the below command as shown below

 

 

ng new sampleproject

 

 

cd sampleproject

 

 

npm i ngx-strength-meter

 

 

And after that you will see the below directory structure of the angular app as shown below

 

 

 

 

 

And now we need to go to app.module.ts file and import the below modules and add it inside the imports array as shown below

 

 

app.module.ts

 

 

TypeScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
 
import { AppComponent } from "./app.component";
 
import { FormsModule,ReactiveFormsModule } from "@angular/forms";
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'
import {StrengthMeterModule} from 'ngx-strength-meter'
import {MatInputModule} from '@angular/material/input'
import {MatCardModule} from '@angular/material/card'
 
 
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    StrengthMeterModule,
    MatCardModule,
    MatInputModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

 

 

And now we need to copy paste the below html code inside the app.component.html file as shown below

 

 

app.component.html

 

 

TypeScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="flex-container">
  <div class="header flex-item">
    <h2 style="text-align:center">
    NGX Strength Meter</h2>
  </div>
 
  <mat-card>
    <mat-card-content>
      <form [formGroup]="form" name="form">
        <mat-form-field style="width:100%">
          <input type="password" formControlName="password" matInput name="password" placeholder="Enter password"/>
        </mat-form-field>
        <strength-meter
        (measure)="onStrengthChange($event)"
        [value]="form.value.password">
        </strength-meter>
      </form>
    </mat-card-content>
  </mat-card>
</div>

 

 

 

As you can see in the above html. code we have the material password input field where the user can write the password and below that we have the password validator strength meter checker where we have the animation telling whether the password is strong or not. For that we are using the strength-meter directive and inside that we are passing the value of the password and also we are passing the measure event function.

 

 

And now we need to go to app.component.ts file and copy paste the below code

 

 

app.component.ts

 

 

TypeScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  form!: FormGroup
 
  constructor(private fb:FormBuilder){}
 
  ngOnInit():void{
    this.form = this.fb.group({
      password:['',Validators.required]
    })
  }
 
  onStrengthChange(score: any) {
    console.log('new score', score);
  }
}

 

 

As you can see we are importing the FormGroup class and also we are the passing the reference of the FormBuilder class inside the constructor. And inside the ngOnInit lifecycle method we are initializing the form to the material strength meter checker and here we are attaching the validator property. And also we have defined the onStrengthChange() function.

 

 

 

Recent Posts

  • Android Java Project to Capture Image From Camera & Save it in SharedPreferences & Display it in Grid Gallery
  • Android Java Project to Store,Read & Delete Data Using SharedPreferences Example
  • Android Java Project to Download Multiple Images From URL With Progressbar & Save it inside Gallery
  • Android Java Project to Capture Image From Camera & Save it inside Gallery
  • Android Java Project to Crop,Scale & Rotate Images Selected From Gallery and Save it inside SD Card
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme