Quiero cambiar el texto cuando this.isDisabled se establece en falso o viceversa, cuando se hace clic en el botón. También he usado this.btn.value , pero me arrojó un 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); } }solución de código : 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; } }comprueba si esto te funciona
Explicación
Sé que la respuesta aceptada funciona, pero es muy complicada. Esto es mucho más simple.
<button (click)="isDisabled = !isDisabled"> {{ isDisabled ? 'Edit' : 'Save' }} </button> export class AppComponent { isDisabled: boolean = false; }