title: Angular Password Strength Extension Color does not work
body: <p>I use the extension <code>@angular-material-extensions/password-strength</code> and literally just copied the showcase example from here <a href="https://angular-material-extensions.github.io/password-strength/home" rel="nofollow noreferrer">https://angular-material-extensions.github.io/password-strength/home</a></p>
  
  <p>Somehow the color primary does never appear. Just the blue and the red color appear. I also had to add a</p>
  
  <pre><code>ngAfterViewChecked() {
      this.cdRef.detectChanges();
   }
  </code></pre>
  
  <p>to fix a error with the color <code>Expression has changed after it was checked...</code></p>
  
  <p>The color does change to something like pink and when it's 100% checked just blue, but I want it to be green of course.</p>
  
  <p>My component.html:</p>
  
  <pre><code>    &lt;tr&gt;
        &lt;td&gt;
            &lt;mat-card-subtitle&gt;
                &lt;mat-slide-toggle [(ngModel)]="showDetails" [ngModelOptions]="{standalone: true}"&gt;Show Password Requirements&lt;/mat-slide-toggle&gt;
              &lt;/mat-card-subtitle&gt;
          &lt;mat-form-field appearance="outline" class="example-full-width" [color]="passwordComponent.color"&gt;
            &lt;mat-pass-toggle-visibility #toggle matSuffix&gt;&lt;/mat-pass-toggle-visibility&gt;
            &lt;input matInput [type]="toggle.type" required placeholder="Password" #password formControlName="password"
              type="password" /&gt;
              &lt;mat-hint align="end" aria-live="polite"&gt;
                  {{password.value.length}} / 25
                &lt;/mat-hint&gt;
            &lt;mat-error *ngIf="formErrors.password" class="form__error"&gt;{{ formErrors.password }} &lt;/mat-error&gt;
          &lt;/mat-form-field&gt;
          &lt;mat-password-strength #passwordComponent min="4" [password]="password.value"&gt;
        &lt;/mat-password-strength&gt;
  
        &lt;mat-password-strength-info
          *ngIf="showDetails"
          [passwordComponent]="passwordComponent"&gt;
        &lt;/mat-password-strength-info&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;mat-form-field class="example-full-width"&gt;
            &lt;input matInput required placeholder="Password Confirmation" compare="password"
              name="passwordConfirmation" formControlName="passwordConfirmation" type="password" /&gt;
            &lt;mat-error *ngIf="formErrors.passwordConfirmation" class="form__error"&gt;
              {{ formErrors.passwordConfirmation }} &lt;/mat-error&gt;
          &lt;/mat-form-field&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
  </code></pre>
  
  <p>Edit: I also found out that <code>&lt;mat-form-field&gt;</code> ignores it if I add the option <code>floatLabel="always"</code> because the auto function does not work itself for this field.</p>