core.js:5980 ERROR TypeError: Cannot read property 'isFirstChange' of undefined at MatPasswordStrengthComponent.ngOnChanges (angular-material-extensions-password-strength.js:454)

[renu1992]

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ ] feature request

OS and Version?

Versions

@angular-devkit/architect 0.1100.7
@angular-devkit/build-angular 0.1100.7
@angular-devkit/core 11.0.7
@angular-devkit/schematics 11.2.10
@angular/cdk 10.2.7
@angular/cli 11.2.10
@angular/material 10.2.7
@schematics/angular 11.2.10
@schematics/update 0.1102.10
rxjs 6.5.5
typescript 4.0.7

Repro steps

on page reload i have created a function to get some validation from api and then on page load everytime it shows error:
core.js:5980 ERROR TypeError: Cannot read property 'isFirstChange' of undefined
at MatPasswordStrengthComponent.ngOnChanges (angular-material-extensions-password-strength.js:454)
after that if i input some data in that field then it shows below error:
core.js:5980 ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'.

The log given by the failure

Desired functionality

error should not come on page load

Mention any other details that might be useful

i am sharing my use case :
html:
<mat-password-strength #passwordComponent
[max]="PasswordMax"
[min]="PasswordMin"
(onStrengthChanged)="onStrengthChanged($event)"
[password]="password.value"
[enableLengthRule]="IsPasswordLength"
[enableLowerCaseLetterRule]="IsLowercase"
[enableUpperCaseLetterRule]="IsUpperCase"
[enableDigitRule]="IsDigit"
[enableSpecialCharRule]="IsSpecialCharector"
[customValidator]="pattern"
>

               <div class="row">
                   <div class="col l12 m12 s12 posRel">
                       <mat-icon *ngIf="showDetails" (click)="toggleInfo()" class="closeIconPswd" color="warn">cancel</mat-icon>
                       <mat-password-strength-info class="infoHeigth" *ngIf="showDetails" 
                            [lowerCaseCriteriaMsg]="'label_lowerCaseCriteriaMsg'|translate"
                        [upperCaseCriteriaMsg]="'label_upperCaseCriteriaMsg'|translate"
                        [digitsCriteriaMsg]="'label_digitsCriteriaMsg'|translate"
                        [specialCharsCriteriaMsg]="'label_specialCharsCriteriaMsg'|translate"
                        [minCharsCriteriaMsg]="('label_errorminreqired'|translate)+ passwordComponent.min +('label_characters'|translate)"
                        [customCharsCriteriaMsg]="'label_CustomMsg'|translate"
                  [passwordComponent]="passwordComponent">
                </mat-password-strength-info>
                    </div>
                </div>

ts. file

/***variable decalaration **************/
showDetails: boolean;
pattern = new RegExp(/(?=.[a-z])(?=.[A-Z])(?=.[0-9])(?=.[@#$^&+=])(?!.[%-'"])/);
PasswordMin: number
PasswordMax=30;
IsPasswordLength=true;
IsUpperCase=true;
IsLowercase=true;
IsSpecialCharector=true;
IsDigit=true;
Strength=0;

then i have called a function in ngOninit to get the validation data form api response and set variables as shown in html part. this error occur on every page where i have implemented this lib

[wadie]

Any update on this ? The opened PR #321 is going nowhere..