Menu
I have this simple code:
<body style="direction: rtl; text-align: right">
<mat-form-field>
<input matInput placeholder="Wanna be rtl" />
</mat-form-field>
</body>
BUT no matter what I'm trying to, the placeholder keep acting as left to right. Is there any way to align it to the right?
536
Hints added via the <mat-hint> hint element can be added to either side by setting the align property on <mat-hint> to either start or end . Attempting to add multiple hints to the same side will raise an error.
You can put style="text-align:center;" inside input element.
Matinput is an Angular directive that primarily allows input and text area elements to work with a form field. With this, you can display placeholders perfectly, add custom error messages, a clear button, specify the maximum length of the text or add prefixes and suffixes for a seamless user experience.
mat-label is similar to labels which we use in normal HTML forms. But the advantage with mat-label is that it has pre-defined CSS style classes and animations defined in it. Installation syntax: ng add @angular/material.
Using text-align on the form field will work: See working StackBlitz example
This solution will align both the placeholder and the input text to the right:
<body>
<mat-form-field style="text-align: right">
<input matInput placeholder="Wanna be rtl" />
</mat-form-field>
</body>
Result:
If you want to only align the placeholder to the right and keep the input text aligned left then add style="text-align: left" to the input as shown below
<body>
<mat-form-field style="text-align: right">
<input matInput placeholder="Wanna be rtl" style="text-align: left"/>
</mat-form-field>
</body>
Result:
167
Use the Bidirectionality module in CDK:
import {BidiModule} from '@angular/cdk/bidi';
...
<body dir="rtl">
<mat-form-field>
<input matInput placeholder="I am RTL" />
</mat-form-field>
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
