To toggle the text based on whether this.isDisabled is set to false or true, you can implement a function that changes it when the button is clicked. I attempted to use this.btn.value, but encountered an error.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<div style="display:flex;align-items:center;flex-direction:column;justify-self:center">
<h2>Welcome to {{name}}</h2>
<input [disabled]="isDisabled" [id]="myId" type="text" value="Vishwas">
<button id="changeText" (click)="enableDisable()">Toggle</button>
</div>
`,
styles: []
})
export class AppComponent {
name = 'Something';
public myId = "testId";
public isDisabled = true;
public btn = document.getElementById('changeText');
enableDisable(){
if(this.isDisabled){
this.isDisabled=false;
this.btn.textContent="Save";
}
else{
this.isDisabled=true;
this.btn.textContent="Edit";
}
console.log(this.isDisabled);
}
}