fix(demo): integration of the toggle visibility in the home module #153

Author: AnthonyNahas

demo/src/app/home/home.component.html

@@ -58,40 +58,37 @@ <h1>@angular-material-extensions/password-strength</h1>
           </mat-tab-group>
         </mat-card-content>
 
-        <mat-card-subtitle fxLayout="row" fxLayoutGap="10px">
-          <mat-slide-toggle (change)="onSlideToggleChange($event)">Show Password</mat-slide-toggle>
+        <mat-card-subtitle>
           <mat-slide-toggle [(ngModel)]="showDetails">Show Password Details</mat-slide-toggle>
         </mat-card-subtitle>
 
         <mat-card-content>
-          <div>
-
-            <!--password input filed-->
-            <mat-form-field appearance="outline" style="width: 100%" [color]="passwordComponent.color">
-              <mat-label>Password</mat-label>
-              <input matInput #password
-                     [type]="inputType"
-                     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
-                                   [enableDigitRule]="true"
-                                   (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>
+          <!--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
+                                 [enableDigitRule]="true"
+                                 (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>
+
         </mat-card-content>
       </mat-card>
     </div>
@@ -113,8 +110,7 @@ <h1>@angular-material-extensions/password-strength</h1>
         <mat-card-subtitle>
           client side password validation with angular form controller
         </mat-card-subtitle>
-        <mat-card-subtitle fxLayout="row" fxLayoutGap="10px">
-          <mat-slide-toggle (change)="onSlideToggleChange($event)">Show Password</mat-slide-toggle>
+        <mat-card-subtitle>
           <mat-slide-toggle [(ngModel)]="showDetails2">Show Password Details</mat-slide-toggle>
         </mat-card-subtitle>
 
@@ -138,8 +134,9 @@ <h1>@angular-material-extensions/password-strength</h1>
           <!--password input filed-->
           <mat-form-field appearance="outline" style="width: 100%">
             <mat-label>Password</mat-label>
+            <mat-pass-toggle-visibility #toggle2 matSuffix></mat-pass-toggle-visibility>
             <input matInput #passwordWithValidation
-                   [type]="inputType"
+                   [type]="toggle2.type"
                    required
                    [formControl]="passwordComponentWithValidation.passwordFormControl"
                    placeholder="Password">

demo/src/app/home/home.component.ts

@@ -1,7 +1,5 @@
 import {ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation} from '@angular/core';
 import {Title} from '@angular/platform-browser';
-import {MatSlideToggleChange} from '@angular/material';
-import {MatPasswordStrengthComponent} from '@angular-material-extensions/password-strength';
 
 @Component({
   selector: 'app-home',
@@ -154,8 +152,4 @@ export class HomeComponent implements OnInit {
     console.log('password strength = ', strength);
   }
 
-  onSlideToggleChange(event: MatSlideToggleChange) {
-    event.checked ? this.inputType = 'text' : this.inputType = 'password';
-  }
-
 }