Label with a style same as Angular Material input

0
votes

I'm currently using this kind of code for my inputs:

    <span class="label">{{inputName}}</span>    
    <mat-form-field appearance="outline">
        <input
          matInput
          [formControlName]="inputName"
          [name]="inputName"
          type="text"
        />
    </mat-form-field>

And i need to have a label before the input (inline) which looks like an mat-form-field with outline appearance. I don't want to put another input but disabled before for having the good style.

The perfect output would be that:

enter image description here

Is there a way to do that ?

1
angularangular-material

1 Answers

0
votes

You can add the styling similar to Angular material input to the span class called 'label'. For example

.label {    
  padding:5px;    
  border:1px solid grey;    
  border-radius:3px;   
}