Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Angular: disable and enable button

I want when the up button is disable by pressing fix it will be enable
To make the up disable I have to double click it,
The fix button does not work, I do not know how to sync between the 2 buttons,
If I press fix I want the count to be reset to 0 and the up button to enable again.

link for my code in stackblitz

My service:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

  export class ElevatorService {
  Count = 0;

  constructor() {}

  breakDown() {
    this.Count++;
    if (this.Count >= 2) return true;
    return false;
  }
}

My component.ts:

export class AppComponent {
  count = 0;
  buttonsDisabled = false;
  constructor(private elevatorService: ElevatorService) {}

  ngOnInit(): void {
    this.count++;
  }

  up() {
    this.buttonsDisabled = this.elevatorService.breakDown();
  }

  Fix() {
    return (this.count = 0);
  }
}

My component.html:

<input type="button" value="Up" (click)="up()" [disabled]="buttonsDisabled">

<input type="button" value="Fix" (click)="Fix()" >

>Solution :

You aren’t using the count member in your component for anything useful at the moment. I would just remove it and use the count in the service to remove confusion.

Fix() {
   this.elevatorService.Count = 0;
}

Mind that just setting this value is probably not the best way to change the state of your service.

You can use a getter that checks the user for it’s state:

get buttonsDisabled() {
   return this.elevatorService.Count
};

Here’s some minor edits to your code on Stackblitz.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading