-
-
Notifications
You must be signed in to change notification settings - Fork 75
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(demo): updated the first example in the home component
- Loading branch information
1 parent
6e48f2f
commit 912db7d
Showing
5 changed files
with
128 additions
and
117 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,45 +1,26 @@ | ||
| ```html | ||
| <mat-card fxFlex> | ||
| <mat-card-title> | ||
| @angular-material-extensions/password-strength | ||
| </mat-card-title> | ||
| <mat-card-subtitle> | ||
| stand alone password component | ||
| </mat-card-subtitle> | ||
|
|
||
| <mat-card-subtitle> | ||
| <mat-slide-toggle [(ngModel)]="showDetails">Show Password Details</mat-slide-toggle> | ||
| </mat-card-subtitle> | ||
|
|
||
| <mat-card-content> | ||
| <div fxFlex> | ||
|
|
||
| <!--password input filed--> | ||
| <mat-form-field appearance="outline" style="width: 100%" [color]="passwordComponent.color"> | ||
| <mat-label>Password</mat-label> | ||
| <mat-pass-toggle-visibility #toggle matSuffix></mat-pass-toggle-visibility> | ||
| <input matInput #password | ||
| [type]="toggle.type" | ||
| required | ||
| placeholder="Password"> | ||
| <mat-hint align="end" aria-live="polite"> | ||
| {{password.value.length}} / 25 | ||
| </mat-hint> | ||
| </mat-form-field> | ||
|
|
||
| <!--@angular-material-extensions/password-strength's main component--> | ||
| <mat-password-strength #passwordComponent | ||
| (onStrengthChanged)="onStrengthChanged($event)" | ||
| [password]="password.value"> | ||
| </mat-password-strength> | ||
|
|
||
| <!--Password's strength info--> | ||
| <mat-password-strength-info | ||
| *ngIf="showDetails" | ||
| [passwordComponent]="passwordComponent"> | ||
| </mat-password-strength-info> | ||
|
|
||
| </div> | ||
| </mat-card-content> | ||
| </mat-card> | ||
| <div fxFlex> | ||
| <!--password input filed--> | ||
| <mat-form-field appearance="outline" style="width: 100%" [color]="passwordComponent.color"> | ||
| <mat-label>Password</mat-label> | ||
| <mat-pass-toggle-visibility #toggle matSuffix></mat-pass-toggle-visibility> | ||
| <input matInput #password | ||
| [type]="toggle.type" | ||
| required | ||
| placeholder="Password"> | ||
| <mat-hint align="end" aria-live="polite"> | ||
| {{password.value.length}} / {{passwordComponent.max}} | ||
| </mat-hint> | ||
| </mat-form-field> | ||
| <!--@angular-material-extensions/password-strength's main component--> | ||
| <mat-password-strength #passwordComponent | ||
| (onStrengthChanged)="onStrengthChanged($event)" | ||
| [password]="password.value"> | ||
| </mat-password-strength> | ||
| <!--Password's strength info--> | ||
| <mat-password-strength-info | ||
| *ngIf="showDetails" | ||
| [passwordComponent]="passwordComponent"> | ||
| </mat-password-strength-info> | ||
| </div> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| ```html | ||
| <div fxFlex> | ||
| <!--password input filed--> | ||
| <mat-form-field appearance="outline" style="width: 100%" [color]="passwordComponent.color"> | ||
| <mat-label>Password</mat-label> | ||
| <mat-pass-toggle-visibility #toggle matSuffix></mat-pass-toggle-visibility> | ||
| <input matInput #password | ||
| [type]="toggle.type" | ||
| required | ||
| placeholder="Password"> | ||
| <mat-hint align="end" aria-live="polite"> | ||
| {{password.value.length}} / 25 | ||
| </mat-hint> | ||
| </mat-form-field> | ||
| <!--@angular-material-extensions/password-strength's main component--> | ||
| <mat-password-strength #passwordComponent | ||
| (onStrengthChanged)="onStrengthChanged($event)" | ||
| [password]="password.value"> | ||
| </mat-password-strength> | ||
| <!--Password's strength info--> | ||
| <mat-password-strength-info | ||
| *ngIf="showDetails" | ||
| [passwordComponent]="passwordComponent"> | ||
| </mat-password-strength-info> | ||
| </div> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| ```typescript | ||
| import {Component, OnInit} from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-home', | ||
| templateUrl: './home.component.html', | ||
| styleUrls: ['./home.component.scss'] | ||
| }) | ||
| export class HomeComponent implements OnInit { | ||
|
|
||
| ngOnInit() { | ||
| } | ||
|
|
||
| onStrengthChanged(strength: number) { | ||
| console.log('password strength = ', strength); | ||
| } | ||
| } | ||
| ``` |