Solution 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";
}

Problem :

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' }"
/>

I have tried adding dir={{dynamicVariable}} to the input attributes but no success.

Comments

Comment posted by JumpIntoTheWater

so for some reason

Comment posted by stackblitz.com/edit/…

can you show a stackblitz that it doesnt work for? here is a stackblitz which works with the suggested way of binding:

By