Change conditionally the outline color in <mat-form-field> in Angular

Question

Im trying to customize my angular form. Using mat object, I was able to change everything except the outline color. The grey default color is staying there!!

Pictures attached.

Would be happy for some ideas.

This is the relevant div (I think) with all what is inside:

<div matformfieldnotchedoutline="" class="mdc-notched-outline ng-tns-c75-0 mdc-notched-outline--upgraded 
                 ng-star-inserted" ng-reflect-open="false" ng-reflect-label-width="111">
 <div class="mdc-notched-outline__leading"></div><div class="mdc-notched-outline__notch">
  <label matformfieldfloatinglabel="" class="mdc-floating-label mat-mdc-floating-label ng-tns-c75-0 ng-star-inserted" 
    ng-reflect-floating="false" ng-reflect-disabled="false" id="mat-mdc-form-field-label-0" for="user.phone" aria-owns="user.phone" style="">
    <mat-label ng-reflect-ng-style="[object Object]" class="ng-tns-c75-0" style="color: rgb(178, 188, 200);">Mobile phone</mat-label>
     <span aria-hidden="true" class="mat-mdc-form-field-required-marker mdc-floating-label--required ng-tns-c75-0 ng-star-inserted"></span>
     <!--bindings={"ng-reflect-ng-if": "true"}-->
    </label>
    <!--bindings={"ng-reflect-ng-if": "true"}-->
    <!--bindings={"ng-reflect-ng-template-outlet": "[object Object]"}-->
    <!--bindings={"ng-reflect-ng-if": "true"}-->
 </div>
 <div class="mdc-notched-outline__trailing"></div>
</div>

None of my changes were changing the outline itself.

this is the field

this is the classes created by angular

these are the changes I was able to add

    border: 2px solid red
    outline: 2px solid green

Answer 1

After trying for few days and researching with smart people, we found this:

add this id in the .html file:

<mat-form-field #formField appearance="outline" class="form">

add this variable in the .ts file:

@ViewChild("formField", { read: ElementRef }) formField!: ElementRef

and change the color like this:

  updateOutline() {
    // @ts-ignore
    const outlines: HTMLCollectionOf<Element> = []
      .concat(Array.from(this.formField.nativeElement.getElementsByClassName("mdc-notched-outline__leading")))
      .concat(Array.from(this.formField.nativeElement.getElementsByClassName("mdc-notched-outline__notch")))
      .concat(Array.from(this.formField.nativeElement.getElementsByClassName("mdc-notched-outline__trailing")))
    // @ts-ignore
    for (const outline of outlines) {
      outline.style.borderColor = this.labelColor
    }
  }