I want to change the text when this.isDisabled is set to false or vice versa, when the button is clicked.
I have also used this.btn.value, but it threw me 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()">Edit</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);
}
}
codeSolution:https://stackblitz.com/edit/angular-ivy-or2wqk?file=src%2Fapp%2Fapp.component.html
<button id="changeText" (click)="enableDisable()">
<span *ngIf="isDisabled; else prompt">
changeText
</span>
</button>
<ng-template #prompt>
Save
</ng-template>
import { Component} from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
isDisabled: boolean = false;
enableDisable() {
this.isDisabled = this.isDisabled ? false : true;
}
}
check if this works for you
Explanation
I know the accepted answer works, but it's very overcomplicated. This is much simpler.
<button (click)="isDisabled = !isDisabled">
{{ isDisabled ? 'Edit' : 'Save' }}
</button>
export class AppComponent {
isDisabled: boolean = false;
}