html - change dir attribute according to a dynamic variable

Question

I would like to change the dir attribute according to a dynamic variable .

  <input 
                [id]="'element'+i" 
                [(ngModel)]="parent.firstName" 
                class="form-control input-lg" 
                [name]="'parent.firstName'"
                [attr.aria-describedby]="'lblfirstName'+i" 
                pattern="^[a-zA-Z-u0590-u05FF ]+$" 
                #firstName="ngModel" 
                [required]="i == 0"
                [ngModelOptions]="{ updateOn: 'blur' }"
/>

Answer 1

If you want to bind the dir attribute, you can add this to the template.html:

<input type="text" [dir]="myDir" />

and in your component.ts:

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  myDir = "rtl";
}