欢迎各位兄弟 发布技术文章
这里的技术是共享的
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?
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:
angular
<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: 
After sometime I came across the sass of the mat-form-field and I found out that if the parent of the mat-form-field has dir="rtl" attribute, it acts as rtl:
<body dir="rtl">
<mat-form-field>
<input matInput placeholder="I am rtl" />
</mat-form-field>
</body>
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>
