How to enable the readonly input

Question

I have an input box using ng Ant design now am using the readonly attribute for the input field. once the user click on edit the readonly has to become the editable field. how to achieve this.

Code:

<i nz-icon type="edit" class="toolbar-icon" (click)="edit()"></i>
<input type="text" nz-input [ngModel]="'French'" [readonly]="true">

ts file:

edit() {
   console.log("function called");
}

Answer 1

You can use <input [readonly]="{{ variable }}>".

In your *.component.ts, initialize the variable:

private variable: boolean = true;

Edit 1

So this up is not working you need to

In your *.component.ts, initialize the variable:

  @Input() editable: boolean = false;
    edit() {
     console.log("function called");
     this.editable = true;
    }

And then you can use for example

<button (click)="edit()">Click me!</button>
<input type="text" [readonly]="!editable">

Sorry for first bad answer. Live demo here https://stackblitz.com/edit/angular-bei96r

Answer 2

The square are used to bind to a variable. And I don't think true is a variable in your ts file.

You can however pass true as a string.

<input type="text" nz-input [ngModel]="'French'" [readonly]="'true'">

Or remove the square brackets totally

<input type="text" nz-input [ngModel]="'French'" readonly="true">