Is there a way in Angular to conditionally render a material style?
For instance, I am looking to apply the following style only to my Password form field text, and only when both input boxes have content:
.mat-form-field-appearance-outline .mat-form-field-infix{
padding-right: 2.3em;
}
Take a look at the image below for reference:
https://i.sstatic.net/KzeGg.png
The issue is that the padding-right styling is also being applied to the Email form field text. My goal is to limit this padding-right application to the bottom form field text, only when both input boxes are filled to prevent text overlapping with the submit button.
This is what my .html file looks like:
<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>
Could someone advise on how to achieve this desired effect? Thank you!