0
0 Comments

In Angular, how can I render a material style conditionally?

For example, I want to only apply the style

.mat-form-field-appearance-outline .mat-form-field-infix{
    padding-right: 2.3em;
}

to my second form field and only when both input boxes have input.

See below:

enter image description here

As you can see, the padding right is being applied to the Email form field as well. However, I only want this padding to be applied to the bottom form field, when both input boxes have input, so the text does not go over the submit button.

My .html:

    <mat-form-field appearance="outline" hideRequiredMarker>
        <mat-label>Email</mat-label>
        <input 
            matInput 
            [(ngModel)]="emailLoginInput"
            style="caret-color: white" 
        />
    </mat-form-field>
    <mat-form-field appearance="outline" hideRequiredMarker>
        <mat-label>Password</mat-label>
        <input
            matInput
            [(ngModel)]="passwordLoginInput"
            type="password"
            style="caret-color: white"
        />
        <div
            [ngStyle]="{'visibility': passwordLoginInput.length && emailLoginInput.length ? 'visible' : 'hidden'}"
            class="continue-button"
            (click)="loginAccount()"
        >
            <img
                src="../../../assets/login/login-arrow.svg"
                alt="Continue"
            />
        </div>
    </mat-form-field>

How can I achieve this?

Thank you in advance.

Anonymous Asked question May 14, 2021