As I delve into learning Angular and Material, I have come across a challenge in my project. I noticed that I need to create forms with a consistent appearance. Take for example the registration form's template snippet below:
<mat-card>
<h2>{{'NAV.REGISTRATION' | translate}}</h2>
<form [formGroup]="registrationForm" (ngSubmit)="submitRegistrationForm()">
<div>
<mat-form-field appearance="outline">
<input matInput formControlName="fullName" placeholder="{{'REGISTRATION.NAME' | translate}} *">
</mat-form-field>
<mat-form-field appearance="outline">
<input matInput formControlName="password" placeholder="{{'REGISTRATION.PASSWORD' | translate}} *" type="password">
</mat-form-field>
...
I aim to implement appearance="outline" to all instances of <mat-form-field> tags in the template. While I attempted using
<div class="mat-form-field-appearance-outline"><div> element itself rather than its children. Additionally, directly adding
mat-form-field{
appearance: outline;
}
to the template's .scss file isn't viable. As a result, I am seeking alternative methods to apply a Material directive value to a custom group of tags without repeating it within the template.