Is there a way to display static text with a label in an angular material form that is styled like an input so they share typography?

Question

I am building a form with Angular material. In some places, I would like to include static text and a label that is styled just like a form input, except without the interactivity and without the underline, like this.

I have been able to hack this together with a custom class:

      <mat-form-field floatLabel="always" class="static-text">
        <input matInput disabled placeholder="My Label" value="My Text" />
      </mat-form-field>

      .static-text {

        :disabled {
          color: black;
        }

        ::ng-deep .mat-form-field-underline {
          display: none;
        }
      }

However, I have to include both the disabled attribute and the custom class. I also tried just using static text elements with built in angular material typography classes, but these don't appear correctly because there is not a mat-form-field element wrapping them.

<div>
    <p class="mat-caption">My Label</p>
    <p class="mat-body">My Text</p>
</div>

Is there actually a built in way to do this, or another standard implementation?

Answer 1

There is another simple hack you can do

In angular material there are many button types you can pick the mat buttons of your choice and can apply the css property as pointer-events: none;

This will act as a simple label as you want..!!

Answer 2

From what I can tell, Angular Material doesn't have that option with in their API. What you'd be looking for would be a native Angular or HTML.

Within Angular, do: [disabled]="true" (or a true condition instead of true ). Within Angular you can also do [readonly]="true" .